CF2-14 fix смена формата даты на шкале y при смене диапазиапазона дат.

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',
+          hour: 'DD HH:mm:ss',
-          day: 'MM.dd HH:mm',
+          day: 'MM.DD HH:mm',
-          week: 'yy.MM.dd HH:mm',
+          week: 'yy.MM.DD HH:mm',
-          month: 'yyyy.MM.dd',
+          month: 'yyyy.MM.DD',
-          quarter: 'yyyy.MM.dd',
+          quarter: 'yyyy.MM.DD',
           year: 'yyyy.MM',
         },
       },
@@ -90,19 +90,80 @@ export type ChartTimeBaseProps = {
   options?: ChartOptions<keyof ChartTypeRegistry> | any,
 }
 
-const timeUnitByInterval = (intervalSec:number):String =>{
+export type TimeParams = {
-  if(intervalSec < 24*60*60)
+  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)
+  if(intervalSec <= 32*60*60)
+    return 'minute'
+  
+  if(intervalSec <= 32*12*60*60)
+    return 'hour'
+  
+  if(intervalSec <= 32*24*60*60)
     return 'day'
 
-  if(intervalSec < 365*24*60*60)
+  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<ChartTimeBaseProps> = ({options, dataParams}) => {  
   const chartRef = useRef<HTMLCanvasElement>(null)
   const [chart, setChart] = useState<any>()
@@ -130,18 +191,19 @@ export const ChartTimeBase: React.FC<ChartTimeBaseProps> = ({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)      
+      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.unit = unit
-        chart.options.scales.y.time.stepSize = Math.round(interval/32)
+        chart.options.scales.y.time.stepSize = stepSize
       }
     }