forked from ddrilling/asb_cloud_front
fix default options
This commit is contained in:
parent
b968fbf053
commit
f7900e36ca
@ -22,12 +22,12 @@ const CreateDataset = (lineConfig) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const ChartOptions = {
|
const ChartOptions = {
|
||||||
responsive: true,
|
// responsive: true,
|
||||||
// plugins:{
|
// plugins:{
|
||||||
// legend:{
|
// legend:{
|
||||||
|
// display: false,
|
||||||
// maxHeight: 64,
|
// maxHeight: 64,
|
||||||
// fullSize: true,
|
// fullSize: true,
|
||||||
// display: true,
|
|
||||||
// posision:'chartArea',
|
// posision:'chartArea',
|
||||||
// align: 'start',
|
// align: 'start',
|
||||||
// }
|
// }
|
||||||
|
@ -1,83 +0,0 @@
|
|||||||
import { useEffect, useState} from 'react';
|
|
||||||
import {ChartTimeBase, ChartTimeData, ChartTimeDataParams} from './ChartTimeBase'
|
|
||||||
|
|
||||||
const GetRandomColor = () => "#" + Math.floor(Math.random()*16777215).toString(16)
|
|
||||||
|
|
||||||
|
|
||||||
function GetOrCreateDatasetByLineConfig(data: ChartTimeData, lineConfig: LineConfig) {
|
|
||||||
let dataset = data?.datasets.find(d => d.label === lineConfig.label)
|
|
||||||
if (!dataset) {
|
|
||||||
let color = lineConfig.borderColor
|
|
||||||
?? lineConfig.backgroundColor
|
|
||||||
?? lineConfig.color
|
|
||||||
?? GetRandomColor()
|
|
||||||
|
|
||||||
dataset = {
|
|
||||||
label: lineConfig.label,
|
|
||||||
data: [],
|
|
||||||
backgroundColor: lineConfig.backgroundColor ?? color,
|
|
||||||
borderColor: lineConfig.borderColor ?? color,
|
|
||||||
borderWidth: lineConfig.borderWidth ?? 1,
|
|
||||||
borderDash: lineConfig.dash ?? [],
|
|
||||||
}
|
|
||||||
data.datasets.push(dataset);
|
|
||||||
}
|
|
||||||
return dataset
|
|
||||||
}
|
|
||||||
|
|
||||||
export type LineConfig = {
|
|
||||||
type?: string
|
|
||||||
label: string
|
|
||||||
units?: string
|
|
||||||
xAccessorName: string
|
|
||||||
yAccessorName: string
|
|
||||||
color?: string
|
|
||||||
borderColor?: string
|
|
||||||
backgroundColor?: string
|
|
||||||
borderWidth?: number
|
|
||||||
dash?: number[]
|
|
||||||
labels?: any[]
|
|
||||||
}
|
|
||||||
|
|
||||||
export type ChartTimeProps = {
|
|
||||||
label?: string,
|
|
||||||
yDisplay: Boolean,
|
|
||||||
lines: LineConfig[],
|
|
||||||
data: any[],
|
|
||||||
interval: number,
|
|
||||||
}
|
|
||||||
|
|
||||||
export const ChartTimeArchive: React.FC<ChartTimeProps> = (props) => {
|
|
||||||
const [dataParams, setDataParams] = useState<ChartTimeDataParams>({ data: { datasets: [] }, yStart: new Date(), })
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if ((!props?.lines)
|
|
||||||
|| (!props?.data)
|
|
||||||
|| (props.lines.length === 0)
|
|
||||||
|| (props.data.length === 0))
|
|
||||||
return
|
|
||||||
|
|
||||||
setDataParams((preDataParams) => {
|
|
||||||
props.lines.forEach(lineCfg => {
|
|
||||||
let dataset = GetOrCreateDatasetByLineConfig(preDataParams.data, lineCfg)
|
|
||||||
let points = props.data.map(dataItem => {
|
|
||||||
return {
|
|
||||||
x: dataItem[lineCfg.xAccessorName],
|
|
||||||
label:0,
|
|
||||||
y: new Date(dataItem[lineCfg.yAccessorName])
|
|
||||||
}
|
|
||||||
})
|
|
||||||
dataset.data = points;
|
|
||||||
});
|
|
||||||
|
|
||||||
preDataParams.yStart = new Date()
|
|
||||||
preDataParams.yStart.setSeconds(preDataParams.yStart.getSeconds() - props.interval)
|
|
||||||
preDataParams.yInterval = props.interval
|
|
||||||
preDataParams.displayLabels = props.yDisplay
|
|
||||||
return preDataParams
|
|
||||||
})
|
|
||||||
|
|
||||||
}, [props.data, props.lines, props.interval, props.yDisplay])
|
|
||||||
|
|
||||||
return (<ChartTimeBase dataParams={dataParams} />)
|
|
||||||
}
|
|
Loading…
Reference in New Issue
Block a user