react-chartjs-2#Line JavaScript Examples
The following examples show how to use
react-chartjs-2#Line.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: chart.js From nextfeathers with Apache License 2.0 | 6 votes |
|
Index = (props) => (
<Layout seoData={seoData}>
<h1>React ChartJS 2 (V4)</h1>
<p>
This demo comes with Error Boundary - when for whatever reason Chart could
not be loaded, we capture it.
</p>
<ErrorBoundary
FallbackComponent={ErrorFallback}
onReset={() => {
// reset the state of your app so the error doesn't happen again
}}
>
<Line options={options} data={data} />
</ErrorBoundary>
</Layout>
)
Example #2
| Source File: Charts.js From windmill-dashboard-react with MIT License | 6 votes |
|
function Charts() {
return (
<>
<PageTitle>Charts</PageTitle>
<div className="grid gap-6 mb-8 md:grid-cols-2">
<ChartCard title="Doughnut">
<Doughnut {...doughnutOptions} />
<ChartLegend legends={doughnutLegends} />
</ChartCard>
<ChartCard title="Lines">
<Line {...lineOptions} />
<ChartLegend legends={lineLegends} />
</ChartCard>
<ChartCard title="Bars">
<Bar {...barOptions} />
<ChartLegend legends={barLegends} />
</ChartCard>
</div>
</>
)
}
Example #3
| Source File: LineChart.js From indeplot with GNU General Public License v3.0 | 6 votes |
|
export function LineChart(props) {
function generateGraph() {
const colorVal = `rgba(${props.color.r},${props.color.g},${props.color.b},${props.color.a})`;
return {
labels: props.labels,
datasets: [
{
label: props.title,
fill: true,
lineTension: 0.5,
backgroundColor: colorVal,
borderColor: 'rgba(0,0,0,1)',
borderWidth: 2,
data: props.data
}
]
}
}
return (
<Line data={generateGraph} legend={{ display: false }} />)
}
Example #4
| Source File: LineGraph.js From Hack-the-October2020 with GNU General Public License v3.0 | 6 votes |
|
function LineGraph({ casesType }) {
const [data, setData] = useState({});
useEffect(() => {
const fetchData = async () => {
await fetch("https://disease.sh/v3/covid-19/historical/all?lastdays=120")
.then((response) => {
return response.json();
})
.then((data) => {
let chartData = buildChartData(data, casesType);
setData(chartData);
console.log(chartData);
// buildChart(chartData);
});
};
fetchData();
}, [casesType]);
return (
<div>
{data?.length > 0 && (
<Line
data={{
datasets: [
{
backgroundColor: "rgba(204, 16, 52, 0.5)",
borderColor: "#CC1034",
data: data,
},
],
}}
options={options}
/>
)}
</div>
);
}
Example #5
| Source File: SelectionChart.js From gsocanalyzer with MIT License | 6 votes |
|
SelectionChart = (props) => {
return (
<div className="gsocChart" >
<Line
data={{
labels: ['2010','2011','2012','2013','2014','2015','2016', '2017', '2018', '2019', '2020', '2021'],
datasets: [
{
label: '% of Participants successful',
data: [80,82,81,83,85,89,88,88.50,88.90,89.70,88.20, 85.60, 86.20, 86.24, 89.05, 92.32, 93.27],
backgroundColor: 'rgba(255, 99, 132, 0.2)',
borderColor: 'rgba(255, 99, 132, 1)',
borderWidth: 1,
},
],
}
}
options={{
maintainAspectRatio: false,
scales: {
yAxes: [
{
ticks: {
beginAtZero: true,
},
},
],
},
legend: {
labels: {
fontSize: props.font,
},
},
}}
/>
</div>
)
}
Example #6
| Source File: Linechart.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
const data = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October"],
datasets: [
{
label: "Sales Analytics",
fill: true,
lineTension: 0.5,
backgroundColor: "rgba(85, 110, 230, 0.2)",
borderColor: "#556ee6",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#556ee6",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#556ee6",
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80]
},
{
label: "Monthly Earnings",
fill: true,
lineTension: 0.5,
backgroundColor: "rgba(235, 239, 242, 0.2)",
borderColor: "#ebeff2",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#ebeff2",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#ebeff2",
pointHoverBorderColor: "#eef0f2",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [80, 23, 56, 65, 23, 35, 85, 25, 92, 36]
}
]
};
var option = {
scales: {
yAxes: [{
ticks: {
max: 100,
min: 20,
stepSize: 10
}
}]
}
}
return (
<React.Fragment>
{/* <Line width={200} height={150} data={data} options={option} /> */}
<Line width={200} height={150} data={data} options={option} />
</React.Fragment>
);
}
Example #7
| Source File: index.js From pi-weather-station with MIT License | 5 votes |
|
DailyChart = () => {
const {
dailyWeatherData,
dailyWeatherDataErr,
dailyWeatherDataErrMsg,
tempUnit,
darkMode,
lengthUnit,
speedUnit,
} = useContext(AppContext);
const [altMode, setAltMode] = useState(false);
const [chartData, setChartData] = useState(null);
const [chartOptions, setChartOptions] = useState(null);
const setChartDataCallback = useCallback((e) => setChartData(e), []);
const setChartOptionsCallback = useCallback((e) => setChartOptions(e), []);
useEffect(() => {
if (dailyWeatherData) {
setChartDataCallback(
mapChartData({
data: dailyWeatherData,
tempUnit,
lengthUnit,
speedUnit,
altMode,
})
);
setChartOptionsCallback(
createChartOptions({
tempUnit,
darkMode,
lengthUnit,
speedUnit,
altMode,
})
);
}
}, [
dailyWeatherData,
tempUnit,
lengthUnit,
altMode,
speedUnit,
darkMode,
setChartOptionsCallback,
setChartDataCallback,
]);
if (chartData && chartOptions) {
return (
<div
className={styles.container}
onClick={() => {
setAltMode(!altMode);
}}
>
<Line options={chartOptions} data={chartData} />
</div>
);
} else if (dailyWeatherDataErr) {
return (
<div
className={`${darkMode ? styles.dark : styles.light} ${
styles.errContainer
}`}
>
<div>Cannot get 7 day weather forecast</div>
<div className={styles.message}>{dailyWeatherDataErrMsg}</div>
</div>
);
} else {
return null;
}
}
Example #8
| Source File: index.js From pi-weather-station with MIT License | 5 votes |
|
HourlyChart = () => {
const {
hourlyWeatherData,
tempUnit,
darkMode,
clockTime,
lengthUnit,
speedUnit,
hourlyWeatherDataErr,
hourlyWeatherDataErrMsg,
} = useContext(AppContext);
const [altMode, setAltMode] = useState(false);
const [chartData, setChartData] = useState(null);
useEffect(() => {
if (hourlyWeatherData) {
setChartData(
mapChartData({
data: hourlyWeatherData,
tempUnit,
clockTime,
lengthUnit,
speedUnit,
altMode,
})
);
}
}, [hourlyWeatherData, tempUnit, clockTime, lengthUnit, altMode, speedUnit]);
if (chartData) {
return (
<div
className={styles.container}
onClick={() => {
setAltMode(!altMode);
}}
>
<Line
data={chartData}
options={chartOptions({
tempUnit,
darkMode,
lengthUnit,
speedUnit,
altMode,
})}
/>
</div>
);
} else if (hourlyWeatherDataErr) {
return (
<div
className={`${darkMode ? styles.dark : styles.light} ${
styles.errContainer
}`}
>
<div>Cannot get 24 hour weather forecast</div>
<div className={styles.message}>{hourlyWeatherDataErrMsg}</div>
</div>
);
} else {
return null;
}
}
Example #9
| Source File: indicateur-variation.js From covid19-dashboard with MIT License | 5 votes |
|
IndicateurVariationChart = ({label, metricName, reports, color, height}) => (
<Line data={formatData(label, metricName, reports, color)} options={options} height={height} />
)
Example #10
| Source File: indicateurs-chart.js From covid19-dashboard with MIT License | 5 votes |
|
IndicateursChart = ({metricName, reports, label, min, max}) => {
const options = {
responsive: true,
tooltips: {
mode: 'index'
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day',
displayFormats: {
day: 'DD/MM'
},
tooltipFormat: 'DD/MM'
},
gridLines: {
offsetGridLines: true
},
offset: true
}]
},
annotation: {
annotations: [{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
borderColor: colors.green,
borderWidth: 2
},
{
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-0',
borderColor: colors.red,
borderWidth: 2
}]
}
}
const formatData = (metricName, reports, label) => {
const datasets = []
if (reports) {
datasets.push({
label,
data: reports.map(report => report[metricName] ? report[metricName].toPrecision(3) : null),
backgroundColor: colors.blue,
borderColor: colors.blue,
fill: false,
spanGaps: true
})
}
return {
labels: reports.map(report => new Date(report.date)),
datasets
}
}
options.annotation.annotations[0].value = min
options.annotation.annotations[1].value = max
return (
<Line data={formatData(metricName, reports, label)} options={options} />
)
}
Example #11
| Source File: Charts.js From ingress-cycle-stats with MIT License | 5 votes |
|
export function CycleLine({ cycles }) {
const [visable, setVisable] = useState(false)
const style = {
lineTension: 0.2,
backgroundColor: "rgba(0,0,0,1)",
borderColor: "rgba(0,0,0,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderWidth: 2,
pointRadius: 2,
pointHitRadius: 20,
}
const foo = {
labels: cycles.map(({ cycle }) => cycle.cycle),
datasets: [
{
...style,
label: "RES",
data: cycles.map((c, i) => c.cycle.res),
borderColor: COLOR_RESISTANCE,
},
{
...style,
label: "ENL",
data: cycles.map((c, i) => c.cycle.enl),
borderColor: COLOR_ENLIGHTENED,
},
],
}
const options = {
maintainAspectRatio: false,
scales: {
xAxes: [
{
ticks: {
// display: false,
},
},
],
yAxes: [
{
ticks: {
display: false,
},
},
],
},
}
return (
<VisibilitySensor
partialVisibility
onChange={isVisible => setVisable(isVisible)}
>
<ChartSpacer>
{visable && <Line data={foo} options={{ ...options, legend: false }} />}
</ChartSpacer>
</VisibilitySensor>
)
}
Example #12
| Source File: linechart.js From gedge-platform with Apache License 2.0 | 5 votes |
|
render() {
const data = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August", "September","October"],
datasets: [
{
label: "Sales Analytics",
fill: true,
lineTension: 0.5,
backgroundColor: "rgba(85, 110, 230, 0.2)",
borderColor: "#556ee6",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#556ee6",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#556ee6",
pointHoverBorderColor: "#fff",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40, 55, 30, 80]
},
{
label: "Monthly Earnings",
fill: true,
lineTension: 0.5,
backgroundColor: "rgba(235, 239, 242, 0.2)",
borderColor: "#ebeff2",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "#ebeff2",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "#ebeff2",
pointHoverBorderColor: "#eef0f2",
pointHoverBorderWidth: 2,
pointRadius: 1,
pointHitRadius: 10,
data: [80, 23, 56, 65, 23, 35, 85, 25, 92, 36]
}
]
};
var option = {
scales: {
yAxes: [{
ticks: {
max: 100,
min: 20,
stepSize: 10
}
}]
}
}
return (
<React.Fragment>
<Line width={474} height={300} data={data} options={option} />
</React.Fragment>
);
}
Example #13
| Source File: barchart.js From Covid-19-Statistics with MIT License | 5 votes |
|
BarChart = () => {
const [chartData, setChartData] = useState({})
useEffect(() => {
const fetchPrices = async () => {
const res = await fetch("https://corona.lmao.ninja/v2/countries")
const data = await res.json()
setChartData({
labels: data.map((info) => info.country),
datasets: [
{
label: "Deaths",
data: data.map((info) => info.deaths),
backgroundColor: [
"#ff0000",
]
},
{
label: "Recovered",
data: data.map((info) => info.recovered),
backgroundColor: [
"#37A006",
]
},
// {
// label: "Tests",
// data: data.map((info) => info.tests),
// backgroundColor: [
// "#DBD811",
// ]
// }
]
});
};
fetchPrices()
}, [])
return (
<div style={{padding:30}}>
<Line
data={chartData}
options={{
responsive: true,
scales: {
yAxes: [
{
stacked: true,
ticks: {
beginAtZero: true,
},
},
],
xAxes: [
{
stacked: true,
},
],
},
plugins: {
title: {
display: true,
text: "Covid Line Chart"
},
legend: {
display: true,
position: "bottom"
}
}
}}
/>
</div>
)
}
Example #14
| Source File: index.js From gobench with Apache License 2.0 | 5 votes |
|
ChartsChartjs = () => {
return (
<div>
<Helmet title="Charts / Chartjs" />
<div className="kit__utils__heading">
<h5>
<span className="mr-3">Charts / Chartjs</span>
<a
href="http://www.chartjs.org/"
rel="noopener noreferrer"
target="_blank"
className="btn btn-sm btn-light"
>
Official Documentation
<i className="fe fe-corner-right-up" />
</a>
</h5>
</div>
<div className="card">
<div className="card-body">
<div className="row">
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Line Chart</strong>
</h5>
<div className="mb-5">
<Line data={lineData} options={lineOptions} width={400} height={200} />
</div>
</div>
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Bar Chart</strong>
</h5>
<div className="mb-5">
<Bar data={barData} options={barOptions} width={400} height={200} />
</div>
</div>
</div>
<div className="row">
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Radar Chart</strong>
</h5>
<div className="mb-5">
<Radar data={radarData} options={radarOptions} width={400} height={200} />
</div>
</div>
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Polar Area Chart</strong>
</h5>
<div className="mb-5">
<Polar data={polarData} options={polarOptions} width={400} height={200} />
</div>
</div>
</div>
<div className="row">
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Pie Chart</strong>
</h5>
<div className="mb-5">
<Pie data={pieData} options={pieOptions} width={400} height={200} />
</div>
</div>
<div className="col-xl-6 col-lg-12">
<h5 className="mb-4">
<strong>Doughnut Chart</strong>
</h5>
<div className="mb-5">
<Doughnut data={doughnutData} options={doughnutOptions} width={400} height={200} />
</div>
</div>
</div>
</div>
</div>
</div>
)
}
Example #15
| Source File: projects-graph.jsx From gsoc-organizations with GNU General Public License v3.0 | 5 votes |
|
ProjectsGraph = ({ data }) => {
const queryData = useStaticQuery(graphql`
query {
filter {
years {
name
}
}
}
`)
const years = queryData.filter.years.map(item => item.name).sort()
const numProjects = []
for (const year of years) {
if (Object.keys(data).includes(year)) {
numProjects.push(data[year].num_projects)
} else {
numProjects.push(0)
}
}
const state = {
labels: years,
datasets: [
{
label: "Number of projects",
fill: false,
lineTension: 0.38,
backgroundColor: "#db6400",
borderColor: "#16697a",
borderWidth: 3,
data: numProjects,
},
],
}
return (
<div className="projects-graph-container">
<Line
data={state}
scaleFontColor="red"
options={{
title: {
display: true,
text: "Number of completed projects year-wise",
fontSize: 14,
},
legend: {
display: false,
},
tooltips: {
enabled: true,
},
scales: {
xAxes: [
{
gridLines: {
drawOnChartArea: false,
},
},
],
yAxes: [
{
gridLines: {
drawOnChartArea: false,
},
ticks: {
beginAtZero: true,
stepSize: 1,
},
},
],
},
}}
/>
</div>
)
}
Example #16
| Source File: Chart.js From DMS_React with GNU Affero General Public License v3.0 | 5 votes |
|
function Chart({chartData, height}) {
const [graphData, setGraphData] = useState({
chartData: {
labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
datasets: [
{
label: 'Delivery 1',
backgroundColor: 'rgba(0, 145, 213, 0.6)',
borderColor: 'rgba(0, 145, 213, 1)',
fill:false,
data : [10,4,20,30,40,60,40,30,10,20,70,80]
},
{
label: 'Delivery 2',
backgroundColor: 'rgba(234, 106, 71, 0.6)',
borderColor: 'rgba(234, 106, 71, 1)',
fill:false,
data : [10,30, 40, 20, 40, 60, 80,10,20,50, 20, 30]
},
{
label: 'Delivery 3',
backgroundColor: 'rgba(28, 78, 128, 0.6)',
borderColor: 'rgba(28, 78, 128, 1)',
fill:false,
data : [5, 10,30, 40, 35, 60, 70, 50, 40, 10, 30, 20]
}
],
}
})
return (
<div className = "chart">
<Line data = {graphData.chartData}
options = {{
maintainAspectRatio: false
}}
height = {height}
/>
</div>
)
}
Example #17
| Source File: Chart.js From DMS_React with GNU Affero General Public License v3.0 | 5 votes |
|
Chart = (props) => {
const {labels, label, borderColor, chartdata, pointBackgroundColor, height, pointBorderColor, shadowColor} = props;
const data = (canvas) => {
const ctx = canvas.getContext("2d");
const _stroke = ctx.stroke;
ctx.stroke = function () {
ctx.save();
ctx.shadowColor = shadowColor;
ctx.shadowBlur = 13;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 12;
_stroke.apply(this, arguments);
ctx.restore();
};
return {
labels: labels,
datasets: [
{
label: label,
fill: false,
tension: 0.40,
fillOpacity: 0.3,
borderColor: borderColor,
borderWidth: '4',
pointBorderColor: pointBorderColor,
pointBackgroundColor: pointBackgroundColor,
pointBorderWidth: '3',
pointHoverBackgroundColor: pointBackgroundColor,
pointHoverBorderColor: '#4CB050',
pointHoverBorderWidth: '6',
pointHoverRadius: '8',
pointRadius: 3,
pointHitRadius: 8,
data: chartdata,
}
]
}
}
const options = {
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
ticks: {
min: 0,
display: false,
},
gridLines: {
display: true,
drawBorder: false,
lineWidth: 10,
}
}],
yAxes: [{
display: false,
ticks: {
suggestedMin: 0,
beginAtZero: true
}
}]
},
};
return (
<Line data={data} options={options} height={height}/>
);
}
Example #18
| Source File: CustomChart.js From DMS_React with GNU Affero General Public License v3.0 | 5 votes |
|
CustomChart = (props) => {
const {labels, label, borderColor, chartdata, pointBackgroundColor, pointHoverBorderColor, height, pointBorderColor, shadowColor} = props;
const data = (canvas) => {
const ctx = canvas.getContext("2d");
const _stroke = ctx.stroke;
ctx.stroke = function () {
ctx.save();
ctx.shadowColor = shadowColor;
ctx.shadowBlur = 13;
ctx.shadowOffsetX = 0;
ctx.shadowOffsetY = 12;
_stroke.apply(this, arguments);
ctx.restore();
};
return {
labels: labels,
datasets: [
{
label: label,
fill: false,
tension: 0.40,
fillOpacity: 0.3,
borderColor: borderColor,
borderWidth: '4',
pointBorderColor: pointBorderColor,
pointBackgroundColor: pointBackgroundColor,
pointBorderWidth: '0',
pointHoverBackgroundColor: pointBackgroundColor,
pointHoverBorderColor: pointHoverBorderColor,
pointHoverBorderWidth: '4',
pointHoverRadius: '6',
pointRadius: 3,
pointHitRadius: 8,
data: chartdata,
}
]
}
}
const options = {
legend: {
display: false
},
scales: {
xAxes: [{
display: true,
ticks: {
min: 0,
display: false,
},
gridLines: {
display: true,
drawBorder: false,
lineWidth: 3,
}
}],
yAxes: [{
display: false,
ticks: {
suggestedMin: 0,
beginAtZero: true
}
}]
},
};
return (
<Line data={data} options={options} height={height}/>
);
}
Example #19
| Source File: Chart.jsx From javascript-mini-projects with The Unlicense | 5 votes |
|
Chart = ({data: { confirmed, deaths, recovered }, country}) => {
const [dailyData, setDailyData] = useState([]);
useEffect(() => {
const fetchAPI = async () => {
setDailyData(await fetchDailyData());
}
fetchAPI();
}, []); //[] this means empty array and this moth to make use effect behave like component didmount and not run endlessly
const lineChart = (
dailyData.length
? (
<Line
data={{
labels: dailyData.map(({ date }) => date),
datasets: [{
data:dailyData.map(({ confirmed }) => confirmed),
label:'Infected',
borderColor: '#3333ff',
fill: true,
}, {
data:dailyData.map(({ deaths }) => deaths),
label:'Deaths',
borderColor: 'red',
backgroundColor: 'rgba(255, 0, 0, 0.5)',
fill: true,
}],
}}
/>) : null
);
console.log(confirmed, recovered, deaths);
const barChart = (
confirmed
? (
<Bar
data={{
labels: ['Infected', 'Recovered', 'Deaths'],
datasets:[{
label: 'People',
backgroundColor: [
'rgba(0, 0, 255, 0.5)',
'rgba(0, 255, 0, 0.5)',
'rgba(255, 0, 0, 0.5)',
],
data:[confirmed.value, recovered.value, deaths.value]
}]
}}
options={{
legend: { display: false},
title: {display: true, text:`Current state in ${country}`},
}}
/>
) : null
);
return(
<div className={styles.container}>
{country ? barChart : lineChart}
</div>
)
}
Example #20
| Source File: ChartJs.js From Purple-React with MIT License | 5 votes |
|
render() {
return (
<div>
<div className="page-header">
<h3 className="page-title">
Chart-js
</h3>
<nav aria-label="breadcrumb">
<ol className="breadcrumb">
<li className="breadcrumb-item"><a href="!#" onClick={event => event.preventDefault()}>Charts</a></li>
<li className="breadcrumb-item active" aria-current="page">Chart-js</li>
</ol>
</nav>
</div>
<div className="row">
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Line Chart</h4>
<Line data={this.data} options={this.options} />
</div>
</div>
</div>
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Bar Chart</h4>
<Bar data={this.data} options={this.options} />
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Area Chart</h4>
<Line data={this.areaData} options={this.areaOptions} />
</div>
</div>
</div>
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Doughnut Chart</h4>
<Doughnut data={this.doughnutPieData} options={this.doughnutPieOptions} />
</div>
</div>
</div>
</div>
<div className="row">
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Pie Chart</h4>
<Pie data={this.doughnutPieData} options={this.doughnutPieOptions} />
</div>
</div>
</div>
<div className="col-md-6 grid-margin stretch-card">
<div className="card">
<div className="card-body">
<h4 className="card-title">Scatter Chart</h4>
<Scatter data={this.scatterChartData} options={this.scatterChartOptions} />
</div>
</div>
</div>
</div>
</div>
)
}
Example #21
| Source File: Chart.js From powir with GNU General Public License v3.0 | 5 votes |
|
function Chart(props) {
function renderChart(info, type, metaData) {
try {
return getChart(info, type, metaData)
} catch (e) {
console.log(e)
}
}
function getChart(info, type, metaData) {
let data = createData(info, type, metaData)
let options = {
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: metaData.xLabel
}
}],
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: metaData.yLabel
}
}]
}
}
switch (type) {
case 'batteryCapacityHistory':
case 'batteryLifeHistory':
return <Line data={data} options={options}/>
case 'powerUsageInfo':
if (metaData.type === 'cumulativePie') {
return <Pie data={data} />
}
else if(metaData.type === 'cumulativeActiveSuspended') {
return <Pie data={data}/>
}
else if (metaData.type === 'dailyBar') {
return <Bar data={data} options={options}/>
}
else if (metaData.type === 'dailyLine') {
return <Line data={data} options={options} />
}
return <Pie data={data} />
default:
return <Line data={data} options={options}/>
}
}
return (
<div>
<div className="content-center">
<div>
<h3>{props.heading}</h3>
<span className="text-xs content-center">{props.info.note}</span>
</div>
</div>
{renderChart(props.info, props.info.name, props.metaData)}
</div>
)
}
Example #22
| Source File: GraphPane.jsx From People-Counter-On-Edge with Apache License 2.0 | 5 votes |
|
GraphPane = ( { graphId, graphData, graphOptions } ) => {
return (
<div className="graph-pane" key={ graphId }>
<Line data={ graphData } redraw={ true } options={ graphOptions } />
</div>
);
}
Example #23
| Source File: Chart.jsx From ReactJS-Projects with MIT License | 5 votes |
|
Chart = ({ data: { confirmed, recovered, deaths }, country }) => {
const [dailyData, setDailyData] = useState({});
useEffect(() => {
const fetchMyAPI = async () => {
const initialDailyData = await fetchDailyData();
setDailyData(initialDailyData);
};
fetchMyAPI();
}, []);
const barChart = (
confirmed ? (
<Bar
data={{
labels: ['Infected', 'Recovered', 'Deaths'],
datasets: [
{
label: 'People',
backgroundColor: ['rgba(0, 0, 255, 0.5)', 'rgba(0, 255, 0, 0.5)', 'rgba(255, 0, 0, 0.5)'],
data: [confirmed.value, recovered.value, deaths.value],
},
],
}}
options={{
legend: { display: false },
title: { display: true, text: `Current state in ${country}` },
}}
/>
) : null
);
const lineChart = (
dailyData[0] ? (
<Line
data={{
labels: dailyData.map(({ date }) => new Date(date).toLocaleDateString()),
datasets: [{
data: dailyData.map((data) => data.confirmed),
label: 'Infected',
borderColor: '#3333ff',
fill: true,
}, {
data: dailyData.map((data) => data.deaths),
label: 'Deaths',
borderColor: 'red',
backgroundColor: 'rgba(255, 0, 0, 0.5)',
fill: true,
}, {
data: dailyData.map((data) => data.recovered),
label: 'Recovered',
borderColor: 'green',
backgroundColor: 'rgba(0, 255, 0, 0.5)',
fill: true,
},
],
}}
/>
) : null
);
return (
<div className={styles.container}>
{country ? barChart : lineChart}
</div>
);
}
Example #24
| Source File: Dashboard.js From id.co.moonlay-eworkplace-admin-web with MIT License | 4 votes |
|
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-info">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card1' isOpen={this.state.card1} toggle={() => { this.setState({ card1: !this.state.card1 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem disabled>Disabled action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Line data={cardChartData2} options={cardChartOpts2} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-primary">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card2' isOpen={this.state.card2} toggle={() => { this.setState({ card2: !this.state.card2 }); }}>
<DropdownToggle className="p-0" color="transparent">
<i className="icon-location-pin"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Line data={cardChartData1} options={cardChartOpts1} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-warning">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<Dropdown id='card3' isOpen={this.state.card3} toggle={() => { this.setState({ card3: !this.state.card3 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</Dropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper" style={{ height: '70px' }}>
<Line data={cardChartData3} options={cardChartOpts3} height={70} />
</div>
</Card>
</Col>
<Col xs="12" sm="6" lg="3">
<Card className="text-white bg-danger">
<CardBody className="pb-0">
<ButtonGroup className="float-right">
<ButtonDropdown id='card4' isOpen={this.state.card4} toggle={() => { this.setState({ card4: !this.state.card4 }); }}>
<DropdownToggle caret className="p-0" color="transparent">
<i className="icon-settings"></i>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another action</DropdownItem>
<DropdownItem>Something else here</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</ButtonGroup>
<div className="text-value">9.823</div>
<div>Members online</div>
</CardBody>
<div className="chart-wrapper mx-3" style={{ height: '70px' }}>
<Bar data={cardChartData4} options={cardChartOpts4} height={70} />
</div>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardBody>
<Row>
<Col sm="5">
<CardTitle className="mb-0">Traffic</CardTitle>
<div className="small text-muted">November 2015</div>
</Col>
<Col sm="7" className="d-none d-sm-inline-block">
<Button color="primary" className="float-right"><i className="icon-cloud-download"></i></Button>
<ButtonToolbar className="float-right" aria-label="Toolbar with button groups">
<ButtonGroup className="mr-3" aria-label="First group">
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(1)} active={this.state.radioSelected === 1}>Day</Button>
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(2)} active={this.state.radioSelected === 2}>Month</Button>
<Button color="outline-secondary" onClick={() => this.onRadioBtnClick(3)} active={this.state.radioSelected === 3}>Year</Button>
</ButtonGroup>
</ButtonToolbar>
</Col>
</Row>
<div className="chart-wrapper" style={{ height: 300 + 'px', marginTop: 40 + 'px' }}>
<Line data={mainChart} options={mainChartOpts} height={300} />
</div>
</CardBody>
<CardFooter>
<Row className="text-center">
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">Visits</div>
<strong>29.703 Users (40%)</strong>
<Progress className="progress-xs mt-2" color="success" value="40" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Unique</div>
<strong>24.093 Users (20%)</strong>
<Progress className="progress-xs mt-2" color="info" value="20" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<Progress className="progress-xs mt-2" color="warning" value="60" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0">
<div className="text-muted">New Users</div>
<strong>22.123 Users (80%)</strong>
<Progress className="progress-xs mt-2" color="danger" value="80" />
</Col>
<Col sm={12} md className="mb-sm-2 mb-0 d-md-down-none">
<div className="text-muted">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<Progress className="progress-xs mt-2" color="primary" value="40" />
</Col>
</Row>
</CardFooter>
</Card>
</Col>
</Row>
<Row>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'facebook', friends: '89k', feeds: '459' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(0)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'twitter', followers: '973k', tweets: '1.792' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(1)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'linkedin', contacts: '500+', feeds: '292' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(2)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
<Col xs="6" sm="6" lg="3">
<Suspense fallback={this.loading()}>
<Widget03 dataBox={() => ({ variant: 'google-plus', followers: '894', circles: '92' })} >
<div className="chart-wrapper">
<Line data={makeSocialBoxData(3)} options={socialChartOpts} height={90} />
</div>
</Widget03>
</Suspense>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardHeader>
Traffic {' & '} Sales
</CardHeader>
<CardBody>
<Row>
<Col xs="12" md="6" xl="6">
<Row>
<Col sm="6">
<div className="callout callout-info">
<small className="text-muted">New Clients</small>
<br />
<strong className="h4">9,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(0, brandPrimary)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-danger">
<small className="text-muted">Recurring Clients</small>
<br />
<strong className="h4">22,643</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(1, brandDanger)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
</Row>
<hr className="mt-0" />
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Monday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="34" />
<Progress className="progress-xs" color="danger" value="78" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Tuesday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="56" />
<Progress className="progress-xs" color="danger" value="94" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Wednesday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="12" />
<Progress className="progress-xs" color="danger" value="67" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Thursday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="43" />
<Progress className="progress-xs" color="danger" value="91" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Friday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="22" />
<Progress className="progress-xs" color="danger" value="73" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Saturday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="53" />
<Progress className="progress-xs" color="danger" value="82" />
</div>
</div>
<div className="progress-group mb-4">
<div className="progress-group-prepend">
<span className="progress-group-text">
Sunday
</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="info" value="9" />
<Progress className="progress-xs" color="danger" value="69" />
</div>
</div>
<div className="legend text-center">
<small>
<sup className="px-1"><Badge pill color="info"> </Badge></sup>
New clients
<sup className="px-1"><Badge pill color="danger"> </Badge></sup>
Recurring clients
</small>
</div>
</Col>
<Col xs="12" md="6" xl="6">
<Row>
<Col sm="6">
<div className="callout callout-warning">
<small className="text-muted">Pageviews</small>
<br />
<strong className="h4">78,623</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(2, brandWarning)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
<Col sm="6">
<div className="callout callout-success">
<small className="text-muted">Organic</small>
<br />
<strong className="h4">49,123</strong>
<div className="chart-wrapper">
<Line data={makeSparkLineData(3, brandSuccess)} options={sparklineChartOpts} width={100} height={30} />
</div>
</div>
</Col>
</Row>
<hr className="mt-0" />
<ul>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-user progress-group-icon"></i>
<span className="title">Male</span>
<span className="ml-auto font-weight-bold">43%</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="warning" value="43" />
</div>
</div>
<div className="progress-group mb-5">
<div className="progress-group-header">
<i className="icon-user-female progress-group-icon"></i>
<span className="title">Female</span>
<span className="ml-auto font-weight-bold">37%</span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="warning" value="37" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-globe progress-group-icon"></i>
<span className="title">Organic Search</span>
<span className="ml-auto font-weight-bold">191,235 <span className="text-muted small">(56%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="56" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-facebook progress-group-icon"></i>
<span className="title">Facebook</span>
<span className="ml-auto font-weight-bold">51,223 <span className="text-muted small">(15%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="15" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-twitter progress-group-icon"></i>
<span className="title">Twitter</span>
<span className="ml-auto font-weight-bold">37,564 <span className="text-muted small">(11%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="11" />
</div>
</div>
<div className="progress-group">
<div className="progress-group-header">
<i className="icon-social-linkedin progress-group-icon"></i>
<span className="title">LinkedIn</span>
<span className="ml-auto font-weight-bold">27,319 <span className="text-muted small">(8%)</span></span>
</div>
<div className="progress-group-bars">
<Progress className="progress-xs" color="success" value="8" />
</div>
</div>
<div className="divider text-center">
<Button color="link" size="sm" className="text-muted" data-toggle="tooltip" data-placement="top"
title="" data-original-title="show more"><i className="icon-options"></i></Button>
</div>
</ul>
</Col>
</Row>
<br />
<Table hover responsive className="table-outline mb-0 d-none d-sm-table">
<thead className="thead-light">
<tr>
<th className="text-center"><i className="icon-people"></i></th>
<th>User</th>
<th className="text-center">Country</th>
<th>Usage</th>
<th className="text-center">Payment Method</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/1.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Yiorgos Avraamu</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-us h4 mb-0" title="us" id="us"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>50%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="50" />
</td>
<td className="text-center">
<i className="fa fa-cc-mastercard" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>10 sec ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Avram Tarasios</div>
<div className="small text-muted">
<span>Recurring</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-br h4 mb-0" title="br" id="br"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>10%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="10" />
</td>
<td className="text-center">
<i className="fa fa-cc-visa" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>5 minutes ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-warning"></span>
</div>
</td>
<td>
<div>Quintin Ed</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-in h4 mb-0" title="in" id="in"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>74%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="warning" value="74" />
</td>
<td className="text-center">
<i className="fa fa-cc-stripe" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>1 hour ago</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-secondary"></span>
</div>
</td>
<td>
<div>Enéas Kwadwo</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-fr h4 mb-0" title="fr" id="fr"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>98%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="danger" value="98" />
</td>
<td className="text-center">
<i className="fa fa-paypal" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last month</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-success"></span>
</div>
</td>
<td>
<div>Agapetus Tadeáš</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-es h4 mb-0" title="es" id="es"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>22%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="info" value="22" />
</td>
<td className="text-center">
<i className="fa fa-google-wallet" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Last week</strong>
</td>
</tr>
<tr>
<td className="text-center">
<div className="avatar">
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="[email protected]" />
<span className="avatar-status badge-danger"></span>
</div>
</td>
<td>
<div>Friderik Dávid</div>
<div className="small text-muted">
<span>New</span> | Registered: Jan 1, 2015
</div>
</td>
<td className="text-center">
<i className="flag-icon flag-icon-pl h4 mb-0" title="pl" id="pl"></i>
</td>
<td>
<div className="clearfix">
<div className="float-left">
<strong>43%</strong>
</div>
<div className="float-right">
<small className="text-muted">Jun 11, 2015 - Jul 10, 2015</small>
</div>
</div>
<Progress className="progress-xs" color="success" value="43" />
</td>
<td className="text-center">
<i className="fa fa-cc-amex" style={{ fontSize: 24 + 'px' }}></i>
</td>
<td>
<div className="small text-muted">Last login</div>
<strong>Yesterday</strong>
</td>
</tr>
</tbody>
</Table>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
Example #25
| Source File: LineGraphComponent.js From project-s0-t1-budget with MIT License | 4 votes |
|
render() {
const data = {
labels: [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"Jun",
"Jul",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec",
],
datasets: [
{
label: "Net Income",
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,255,0,0.2)",
borderColor: "rgba(0,255,0,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(0,255,0,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(0,255,0,0.2)",
pointHoverBorderColor: "rgba(0,255,0,0.2)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: this.state.netIncomeData, //this is sample data for Net Income for now, replace with new array containing the data from database
},
{
label: "Income",
fill: false,
lineTension: 0,
backgroundColor: "rgba(0,0,255,0.2)",
borderColor: "rgba(0,0,255,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(0,0,255,0.2)",
pointHoverBorderColor: "rgba(0,0,255,0.2)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: this.state.incomeData, //replaces the data of income with the new dataset of income from the state
},
{
label: "Expenses",
fill: false,
lineTension: 0,
backgroundColor: "rgba(238,130,238,0.2)",
borderColor: "rgba(238,130,238,1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(238,130,238,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(238,130,238,0.2)",
pointHoverBorderColor: "rgba(238,130,238,0.2)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: this.state.expenseData, //this is sample data for Expenses for now, replace with new array containing the data from database
},
{
label: "Net Income Goal",
fill: false,
lineTension: 0,
backgroundColor: "rgba(255, 223, 63, 0.2)",
borderColor: "rgba(255, 223, 63, 1)",
borderCapStyle: "butt",
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: "miter",
pointBorderColor: "rgba(255, 223, 63, 1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 5,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(255, 223, 63, 0.2)",
pointHoverBorderColor: "rgba(255, 223, 63, 0.2)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: this.state.goalData,
},
],
};
return (
<div>
<h1>Line Graph</h1>
<div>
<h4>Year</h4>
<Form.Row>
<Form.Group as={Col} md="2" controlId="YearGraph">
<Form.Control
as="select"
name="Year"
onChange={this.handleChange}
value={this.state.selectedYear}
>
<option value="2020">2020</option>
<option value="2019">2019</option>
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
</Form.Control>
</Form.Group>
</Form.Row>
</div>
<Line data={data} />
</div>
);
}
Example #26
| Source File: Chart.js From covid-tracker-material-ui-react with MIT License | 4 votes |
|
function Chart({
data,
state,
duration,
attribute,
borderColor,
backgroundColor,
type,
labelText,
title,
fontColor,
}) {
const numberFormatter = new Intl.NumberFormat("en-IN", {
maximumFractionDigits: 1,
});
const abbreviateNumber = (number) => {
if (Math.abs(number) < 1e3) return numberFormatter.format(number);
else if (Math.abs(number) >= 1e3 && Math.abs(number) < 1e5)
return numberFormatter.format(number / 1e3) + "K";
else if (Math.abs(number) >= 1e5 && Math.abs(number) < 1e7)
return numberFormatter.format(number / 1e5) + "L";
else if (Math.abs(number) >= 1e7 && Math.abs(number) < 1e10)
return numberFormatter.format(number / 1e7) + "Cr";
else if (Math.abs(number) >= 1e10 && Math.abs(number) < 1e14)
return numberFormatter.format(number / 1e10) + "K Cr";
else if (Math.abs(number) >= 1e14)
return numberFormatter.format(number / 1e14) + "L Cr";
};
const buildChartData = () => {
let chartData = [];
if (duration === "all") {
for (let date in data[state].dates) {
const dataDate = new Date(
parseInt(date.split("-")[0]),
parseInt(date.split("-")[1]) - 1,
parseInt(date.split("-")[2])
);
if (data[state]["dates"][date][type]) {
let newDataPoint = {
x: dataDate,
y: data[state]["dates"][date][type][attribute],
};
chartData.push(newDataPoint);
}
}
return chartData;
} else {
const specifiedDate = new Date(
new Date().getTime() - 1000 * 60 * 60 * 24 * 30 * duration
);
for (let date in data[state].dates) {
const dataDate = new Date(
parseInt(date.split("-")[0]),
parseInt(date.split("-")[1]) - 1,
parseInt(date.split("-")[2])
);
if (specifiedDate < dataDate) {
if (data[state]["dates"][date][type]) {
let newDataPoint = {
x: dataDate,
y: data[state]["dates"][date][type][attribute] || 0,
};
chartData.push(newDataPoint);
}
}
}
return chartData;
}
};
const options = {
legend: {
display: false,
},
elements: {},
tooltips: {
mode: "index",
intersect: false,
},
scales: {
xAxes: [
{
type: "time",
time: {
format: "YY-MM-DD",
tooltipFormat: "ll",
},
},
],
yAxes: [
{
gridLines: {
display: false,
},
ticks: {
callback: function (value, index, values) {
return abbreviateNumber(value);
},
beginAtZero: true,
},
},
],
},
};
const classes = useStyles();
return (
<div className={classes.root}>
<Typography variant="h6" gutterBottom style={{ color: `${fontColor}` }}>
{title}
</Typography>
<Line
data={{
datasets: [
{
label: `${labelText} ${STATE_NAMES[state]}`,
backgroundColor: backgroundColor,
borderColor: borderColor,
data: buildChartData(),
},
],
}}
options={options}
/>
</div>
);
}
Example #27
| Source File: PriceHistory.js From app-ui with The Unlicense | 4 votes |
|
export default function PriceHistory(props) {
const sale = props.sale;
const [historicSales, setHistoricSales] = useState(false);
const account = useAccount();
useEffect(() => {
if (historicSales === false && account && account.near) {
setHistoricSales([]);
const fetchHistoricData = async () => {
const near = account.near;
const currentHeight = sale.endBlockHeight || sale.currentBlockHeight;
const firstBlockHeight = Math.max(
currentHeight - BlockInterval * MaxHistorySize,
sale.startBlockHeight ||
currentHeight - BlockInterval * UnknownHistorySize
);
let height = truncBlockHeight(currentHeight);
const step =
BlockInterval *
Math.max(
1,
Math.trunc(
Math.trunc((height - firstBlockHeight) / BlockInterval) /
MaxNumberToDisplay
)
);
const sales = [];
let promises = [];
let needFetching = 0;
while (height > firstBlockHeight) {
const cachedSale = getCachedHistoricSale(sale.saleId, height);
if (cachedSale === false) {
promises.push(fetchHistoricSale(near, sale.saleId, height));
++needFetching;
} else {
promises.push(Promise.resolve(cachedSale));
}
height -= step;
if (needFetching === 10) {
sales.push(...(await Promise.all(promises)));
needFetching = 0;
promises = [];
setHistoricSales(sales);
}
}
if (promises.length > 0) {
sales.push(...(await Promise.all(promises)));
setHistoricSales(sales);
}
};
fetchHistoricData();
}
}, [historicSales, account, sale]);
const inToken = useToken(sale.inTokenAccountId);
const outToken = useToken(sale.outTokens[0].tokenAccountId);
let lineData = false;
let options = false;
let numData = 0;
if (historicSales && inToken && outToken) {
const datasets = [
{
data: [],
label: `Before sale started (no tokens sold) ${outToken.metadata.symbol} / ${inToken.metadata.symbol}`,
fill: false,
backgroundColor: "#bbbbbb",
borderColor: "#bbbbbb22",
},
];
[sale, ...historicSales].reverse().forEach((sale, i) => {
if (!sale) {
return;
}
const x = Math.min(sale.endDate, sale.currentDate);
const inAmount = fromTokenBalance(inToken, sale.inTokenRemaining);
const outAmount = fromTokenBalance(outToken, sale.outTokens[0].remaining);
const price = outAmount.gt(0) ? inAmount.div(outAmount) : null;
if (price) {
numData += 1;
if (sale.started()) {
if (datasets.length === 1) {
datasets.push({
data: [],
label: `${outToken.metadata.symbol} / ${inToken.metadata.symbol}`,
fill: false,
backgroundColor: "#8766ac",
borderColor: "#8766ac22",
});
}
}
datasets[sale.started() ? 1 : 0].data.push({
x,
y: price.toNumber(),
});
}
});
lineData = {
datasets,
};
options = {
animation: false,
responsive: true,
scales: {
xAxis: {
type: "time",
time: {
minUnit: "hour",
},
ticks: {
major: {
enabled: true,
},
},
},
yAxis: {
min: 0,
ticks: {
beginAtZero: true,
},
},
},
};
}
return (
lineData &&
numData > 1 && (
<div className="card mb-2">
<div className="card-body">
<div>Rate history</div>
<Line data={lineData} options={options} />
</div>
</div>
)
);
}
Example #28
| Source File: QuizStats.js From Quizzie with MIT License | 4 votes |
|
function QuizStats(props) {
const [loading, setLoading] = useState(true);
let state = null;
const [marksPieData, setMarksPieData] = useState({labels: [], data: [], colors: []});
const [highLowGraph, setHighLowData] = useState({highest: -1, lowest: -1, average: -1});
const [lineGraphData, setLineData] = useState({labels: [], data: []});
const [redirect, setRedirect] = useState(false);
const randomColor = () => {
let r = Math.floor(Math.random() * 255);
let g = Math.floor(Math.random() * 255);
let b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
}
const setup = () => {
let obj = {};
let obj2 = {labels: [], data: []};
let highest = -1;
let lowest = Infinity;
let sum = 0;
state.map((response) => {
highest = Math.max(highest, response.marks);
lowest = Math.min(lowest, response.marks);
sum += response.marks;
if(obj[response.marks] === undefined) {
obj[response.marks] = 1;
} else {
obj[response.marks]++;
}
let time = (response.timeEnded-response.timeStarted)/(1000*60);
obj2["labels"].push(response.userId.name);
obj2["data"].push(time);
})
Object.keys(obj).map((mark) => {
let newData = marksPieData;
newData["labels"].push(mark);
newData["data"].push(obj[mark]);
newData["colors"].push(randomColor());
setMarksPieData(newData);
})
let average = sum/state.length;
let newBarData = highLowGraph;
newBarData["highest"] = highest;
newBarData["average"] = average;
newBarData["lowest"] = lowest;
setHighLowData(newBarData);
setLineData(obj2);
setLoading(false);
}
useState(() => {
if(props.location.state === undefined) {
setLoading(false);
setRedirect(true);
return;
}
state = props.location.state.responses;
console.log(state);
setup();
}, [])
if (loading) {
return <Loading />
} else if(redirect) {
return <Redirect to="/dashboard" />
}
return (
<Container className="result-page">
<div className="result-head">
<Typography variant="h4" className="result-title">Stats</Typography>
</div>
<div className="charts-container" style={{paddingBottom: '3%'}}>
<div className="pie-chart" style={{marginBottom: '3%'}}>
<Pie data={{
datasets: [{data: marksPieData["data"], backgroundColor: marksPieData["colors"]}],
labels: marksPieData["labels"]
}}
width={300} height={300}
options={{
maintainAspectRatio: false,
responsive: true,
title: {
display: true,
text: "Marks Obtained",
fontSize: 16
}}}/>
</div>
<Grid container spacing={0}>
<Grid item xs={12} sm={6}>
<Bar width={300} height={300}
data={{
datasets: [{
data: [highLowGraph["highest"], highLowGraph["average"], highLowGraph["lowest"]],
backgroundColor: ["green", "yellow", "red"],
barThickness: 70
}],
labels: ["Highest", "Average", "Lowest"]
}}
options={{
legend: {display: false},
maintainAspectRatio: false,
title: {
display: true,
text: "Highest/Average/Lowest",
fontSize: 16
},
scales: { yAxes: [{ticks: {beginAtZero: true}}]}
}} />
</Grid>
<Grid item xs={12} sm={6}>
<Line width={300} height={300}
data={{
datasets: [{
data: lineGraphData["data"],
backgroundColor: "rgba(255, 0, 255, 0.3)",
borderColor: "rgb(255, 0, 255)"
}],
labels: lineGraphData["labels"]
}}
options={{
maintainAspectRatio: false,
title: {
display: true,
text: "Time taken (in minutes)",
fontSize: 16
},
legend: {display: false}
}} />
</Grid>
</Grid>
</div>
</Container>
)
}
Example #29
| Source File: SiteTrafficChart.js From DMS_React with GNU Affero General Public License v3.0 | 4 votes |
|
SiteTrafficChart = (props) => {
const {height} = props;
const data = (canvas) => {
const ctx = canvas.getContext("2d");
const _stroke = ctx.stroke;
ctx.stroke = function () {
ctx.save();
ctx.shadowColor = "#4C4C4C";
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
_stroke.apply(this, arguments)
ctx.restore();
};
return {
labels: ["Page A", "Page B", "Page C", "Page D", "Page E", "Page F", "Page G"],
datasets: [
{
label: "My First dataset",
data: [5000, 6000, 3500, 4900, 3000, 5000, 2500],
borderColor: '#00BCD4',
borderWidth: 1,
pointBackgroundColor: "#00BCD4",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#00BCD4",
pointHoverBorderColor: "#fff",
pointRadius: 6,
pointHoverRadius: 8,
fill: false
},
{
label: "My First dataset",
data: [2500, 3000, 5500, 3200, 5300, 4000, 3500],
borderColor: '#3F51B5',
borderWidth: 1,
pointBackgroundColor: "#3F51B5",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#3F51B5",
pointHoverBorderColor: "#fff",
pointRadius: 6,
pointHoverRadius: 8,
fill: false
}, {
label: "My First dataset",
data: [1500, 2000, 1200, 2400, 1600, 2200, 1800],
borderColor: '#FF9800',
borderWidth: 1,
pointBackgroundColor: "#FF9800",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#FF9800",
pointHoverBorderColor: "#fff",
pointRadius: 6,
pointHoverRadius: 8,
fill: false
}, {
label: "My First dataset",
data: [1000, 1500, 700, 3800, 1200, 1400, 1100],
borderColor: '#4CAF50',
borderWidth: 1,
pointBackgroundColor: "#4CAF50",
pointBorderColor: "#fff",
pointHoverBackgroundColor: "#4CAF50",
pointHoverBorderColor: "#fff",
pointRadius: 6,
pointHoverRadius: 8,
fill: false
}
]
}
};
const options = {
legend: {
display: false
},
scales: {
yAxes: [{
display: true,
ticks: {
suggestedMax: 10000,
beginAtZero: true
}
}]
},
};
return (
<Line data={data} height={height} options={options}/>
);
}
