@operato/chart 7.0.30 → 7.0.32

package/src/scichart/scichart-builder.ts

@@ -14,10 +14,15 @@ function convertColor(color: string | string[] | undefined, defaultColor?: strin
   return tinyColor.toHex8String() || defaultColor
 }
 
+function getLocalTimeOffset() {
+  const now = new Date()
+  return now.getTimezoneOffset() * -60
+}
+
 export async function buildSciChart(
   config: OperatoChart.ChartConfig | undefined | null,
   container: any,
-  { fontSize, fontFamily, fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string }
+  { fontSize = 14, fontFamily = 'Roboto', fontColor }: { fontSize?: number; fontFamily?: string; fontColor?: string }
 ): Promise<{ chart: any; dataSeries: any[] } | undefined> {
   if (!config) {
     return
@@ -37,6 +42,7 @@ export async function buildSciChart(
     StackedMountainCollection,
     NumericAxis,
     DateTimeNumericAxis,
+    ENumericFormat,
     EAutoRange,
     EAxisAlignment,
     ECoordinateMode,
@@ -65,20 +71,37 @@ export async function buildSciChart(
     VerticalLineAnnotation
   } = SciChart
 
+  class LocalTimeLabelProvider extends SmartDateLabelProvider {
+    formatLabel(value: number): string {
+      const date = new Date(value)
+      return new Intl.DateTimeFormat('default', {
+        year: 'numeric',
+        month: '2-digit',
+        day: '2-digit',
+        hour: '2-digit',
+        minute: '2-digit',
+        second: '2-digit'
+      }).format(date)
+    }
+  }
+
   const { type: chartType, options, data: fromData } = config
   const { datasets = [] } = fromData || {}
   var {
     theme,
-    tooltip,
-    animation,
-    legend,
+    tooltip = true,
+    animation = true,
+    legend = {
+      display: true,
+      position: 'top'
+    },
     scales: fromScales,
-    xGridLine,
-    yGridLine,
-    y2ndGridLine,
-    stacked,
-    multiAxis,
-    annotations
+    xGridLine = true,
+    yGridLine = true,
+    y2ndGridLine = false,
+    stacked = false,
+    multiAxis = false,
+    annotations = []
   } = options || {}
 
   var baseColor = getBaseColorFromTheme(theme)
@@ -111,6 +134,15 @@ export async function buildSciChart(
       display = !!axisTitle
     } = ticks || {}
 
+    const labelProvider = new SmartDateLabelProvider({
+      labelFormat: ENumericFormat.Date_HHMMSS,
+      showWiderDateOnFirstLabel: true,
+      showYearOnWiderDate: true,
+      dateOffset: getLocalTimeOffset()
+    })
+
+    labelProvider.cursorNumericFormat = ENumericFormat.Date_DDMMHHMM
+
     const xAxis = new DateTimeNumericAxis(wasmContext, {
       axisTitle,
       autoRange: autoMin || autoMax ? EAutoRange.Always : undefined,
@@ -128,7 +160,7 @@ export async function buildSciChart(
         fontSize,
         color: textStrokeColor
       },
-      labelProvider: new SmartDateLabelProvider()
+      labelProvider
     })
 
     sciChartSurface.xAxes.add(xAxis)
@@ -325,7 +357,7 @@ export async function buildSciChart(
 
   if (annotations) {
     annotations.forEach(annotation => {
-      let sciAnnotation: any
+      let sciAnnotation
       let horizontalAnchorPoint =
         annotation.horizontalAnchorPoint == 'Right'
           ? EHorizontalAnchorPoint.Right
@@ -349,7 +381,9 @@ export async function buildSciChart(
             verticalAnchorPoint,
             fontSize: annotation.fontSize,
             fontFamily: annotation.fontFamily,
-            textColor: convertColor(annotation.stroke, fontColor)
+            textColor: convertColor(annotation.stroke, fontColor),
+            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
           })
           break
         case 'line':
@@ -360,8 +394,8 @@ export async function buildSciChart(
             y2: annotation.y2,
             stroke: convertColor(annotation.stroke, '#FF0000'),
             strokeThickness: annotation.strokeThickness,
-            xCoordinateMode: ECoordinateMode.Relative,
-            yCoordinateMode: ECoordinateMode.DataValue
+            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
           })
           break
         case 'box':
@@ -372,28 +406,37 @@ export async function buildSciChart(
             y2: annotation.y2,
             fill: convertColor(annotation.fill, '#FF0000'),
             stroke: convertColor(annotation.stroke, '#FF0000'),
-            strokeThickness: annotation.strokeThickness
+            strokeThickness: annotation.strokeThickness,
+            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
           })
           break
         case 'horizontalLine':
           sciAnnotation = new HorizontalLineAnnotation({
             y1: annotation.y1,
             stroke: convertColor(annotation.stroke, '#FF0000'),
-            strokeThickness: annotation.strokeThickness
+            strokeThickness: annotation.strokeThickness,
+            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
           })
           break
         case 'verticalLine':
           sciAnnotation = new VerticalLineAnnotation({
             x1: annotation.x1,
             stroke: convertColor(annotation.stroke, '#FF0000'),
-            strokeThickness: annotation.strokeThickness
+            strokeThickness: annotation.strokeThickness,
+            xCoordinateMode: annotation.xCoordinateMode || ECoordinateMode.DataValue,
+            yCoordinateMode: annotation.yCoordinateMode || ECoordinateMode.DataValue
           })
           break
         default:
+          console.error('Unknown annotation type:', annotation.type)
           break
       }
       if (sciAnnotation) {
         sciChartSurface.annotations.add(sciAnnotation)
+      } else {
+        console.error('Failed to create annotation:', annotation)
       }
     })
   }

package/src/types.d.ts

@@ -95,8 +95,8 @@ declare namespace OperatoChart {
 
   export interface Annotation {
     type: AnnotationType
-    x1: number
-    y1: number
+    x1?: number
+    y1?: number
     x2?: number
     y2?: number
     stroke?: string
@@ -105,8 +105,10 @@ declare namespace OperatoChart {
     text?: string
     horizontalAnchorPoint?: 'Left' | 'Center' | 'Right'
     verticalAnchorPoint?: 'Top' | 'Center' | 'Bottom'
+    xCoordinateMode?: 'DataValue' | 'Pixel' | 'Relative'
+    yCoordinateMode?: 'DataValue' | 'Pixel' | 'Relative'
     [key: string]: any
   }
 
-  export type AnnotationType = 'line' | 'text' | 'box' | 'horizontalLine' | 'verticalLine' | 'custom' | undefined
+  export type AnnotationType = 'line' | 'text' | 'box' | 'horizontalLine' | 'verticalLine' | undefined
 }

package/stories/ox-input-chart-timeseries.stories.ts

@@ -211,7 +211,58 @@ MultiAxis.args = {
         ]
       },
       multiAxis: true,
-      legend: { display: true }
+      legend: { display: true },
+      annotations: [
+        {
+          type: 'line',
+          x1: 0,
+          y1: -10,
+          x2: 1,
+          y2: 10,
+          stroke: 'red',
+          strokeThickness: 5,
+          xCoordinateMode: 'Relative',
+          yCoordinateMode: 'DataValue'
+        },
+        {
+          type: 'text',
+          x1: 0.5,
+          y1: 0,
+          text: 'Hello',
+          fontSize: 50,
+          stroke: 'blue',
+          xCoordinateMode: 'Relative',
+          yCoordinateMode: 'DataValue'
+        },
+        {
+          type: 'box',
+          x1: 0.2,
+          y1: 10,
+          x2: 0.5,
+          y2: 20,
+          fill: 'green',
+          stroke: 'blue',
+          strokeThickness: 10,
+          xCoordinateMode: 'Relative',
+          yCoordinateMode: 'DataValue'
+        },
+        {
+          type: 'horizontalLine',
+          y1: 20,
+          stroke: 'purple',
+          strokeThickness: 5,
+          xCoordinateMode: 'Relative',
+          yCoordinateMode: 'DataValue'
+        },
+        {
+          type: 'verticalLine',
+          x1: 0.8,
+          stroke: 'orange',
+          strokeThickness: 5,
+          xCoordinateMode: 'Relative',
+          yCoordinateMode: 'DataValue'
+        }
+      ]
     }
   }
 }