diff --git a/src/components/charts/ChartTimeBase.tsx b/src/components/charts/ChartTimeBase.tsx index 5412b15..e56104e 100644 --- a/src/components/charts/ChartTimeBase.tsx +++ b/src/components/charts/ChartTimeBase.tsx @@ -30,11 +30,11 @@ const defaultOptions = { millisecond: 'HH:mm:ss.SSS', second: 'HH:mm:ss', minute: 'HH:mm:ss', - hour: 'dd HH:mm:ss', - day: 'MM.dd HH:mm', - week: 'yy.MM.dd HH:mm', - month: 'yyyy.MM.dd', - quarter: 'yyyy.MM.dd', + hour: 'DD HH:mm:ss', + day: 'MM.DD HH:mm', + week: 'yy.MM.DD HH:mm', + month: 'yyyy.MM.DD', + quarter: 'yyyy.MM.DD', year: 'yyyy.MM', }, }, @@ -90,19 +90,80 @@ export type ChartTimeBaseProps = { options?: ChartOptions | any, } -const timeUnitByInterval = (intervalSec:number):String =>{ - if(intervalSec < 24*60*60) +export type TimeParams = { + unit: String + stepSize: number +} + +const linesPerInterval = 32 + +const timeUnitByInterval = (intervalSec:number):String => { + if(intervalSec <= 60) + return 'millisecond' + + if(intervalSec <= 32*60) return 'second' - if(intervalSec < 30*24*60*60) - return 'day' + if(intervalSec <= 32*60*60) + return 'minute' - if(intervalSec < 365*24*60*60) + if(intervalSec <= 32*12*60*60) + return 'hour' + + if(intervalSec <= 32*24*60*60) + return 'day' + + if(intervalSec <= 32*7*24*60*60) return 'week' + + if(intervalSec <= 32*30.4375*24*60*60) + return 'month' + + if(intervalSec <= 32*121.75*24*60*60) + return 'quarter' else return 'year' } +const timeParamsByInterval = (intervalSec:number) :TimeParams => { + let stepSize = intervalSec + let unit = timeUnitByInterval(intervalSec) + + switch(unit){ + case "millisecond": + stepSize *= 1000 + break; + case "second": + //stepSize *= 1 + break; + case "minute": + stepSize /= 60 + break; + case "hour": + stepSize /= 60*60 + break; + case "day": + stepSize /= 24*60*60 + break; + case "week": + stepSize /= 7*24*60*60 + break; + case "month": + stepSize /= 30*24*60*60 + break; + case "quarter": + stepSize /= 91*24*60*60 + break; + case "year": + stepSize /= 365.25*24*60*60 + break; + } + + stepSize = Math.round(stepSize/linesPerInterval) + stepSize = stepSize > 0 ? stepSize : 1; + return {unit, stepSize} +} + export const ChartTimeBase: React.FC = ({options, dataParams}) => { const chartRef = useRef(null) const [chart, setChart] = useState() @@ -130,18 +191,19 @@ export const ChartTimeBase: React.FC = ({options, dataParams chart.data = dataParams.data chart.options.aspectRatio = options?.aspectRatio - if(dataParams.yStart){ let interval = Number(dataParams.yInterval ?? 600) let start = new Date(dataParams.yStart) let end = new Date(dataParams.yStart) - end.setSeconds(end.getSeconds() + interval) + end.setSeconds(end.getSeconds() + interval) + let {unit, stepSize} = timeParamsByInterval(interval) + if(chart.options.scales?.y){ chart.options.scales.y.max = end.getTime() chart.options.scales.y.min = start.getTime() chart.options.scales.y.ticks.display = dataParams.displayLabels ?? true - chart.options.scales.y.time.unit = timeUnitByInterval(interval) - chart.options.scales.y.time.stepSize = Math.round(interval/32) + chart.options.scales.y.time.unit = unit + chart.options.scales.y.time.stepSize = stepSize } }