@record-evolution/widget-linechart 1.4.9 → 1.4.10

package/package.json

@@ -3,7 +3,7 @@
     "description": "Webcomponent widget-linechart following open-wc recommendations",
     "license": "MIT",
     "author": "widget-linechart",
-    "version": "1.4.9",
+    "version": "1.4.10",
     "type": "module",
     "main": "dist/widget-linechart.js",
     "types": "dist/src/widget-linechart.d.ts",
@@ -16,6 +16,7 @@
         "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
         "build": "rollup -c rollup.config.js --bundleConfigAsCjs",
         "watch": "rollup -w -c rollup.config.js --bundleConfigAsCjs",
+        "types": "cat src/definition-schema.json | json2ts > src/definition-schema.d.ts",
         "release": "npm version patch --tag-version-prefix='' && git push && git push --tag"
     },
     "dependencies": {
@@ -39,6 +40,7 @@
         "@types/tinycolor2": "^1.4.6",
         "@web/dev-server": "^0.4.0",
         "concurrently": "^8.2.2",
+        "json-schema-to-typescript": "^13.1.1",
         "tslib": "^2.6.2",
         "typescript": "^5.2.2"
     },

package/src/definition-schema.d.ts

@@ -0,0 +1,115 @@
+/* eslint-disable */
+/**
+ * This file was automatically generated by json-schema-to-typescript.
+ * DO NOT MODIFY IT BY HAND. Instead, modify the source JSONSchema file,
+ * and run json-schema-to-typescript to regenerate this file.
+ */
+
+export type Title = string;
+export type Subtitle = string;
+/**
+ * This will apply a proper time series x-Axis. Check if your x-values are timestamps.
+ */
+export type TimeseriesChart = boolean;
+export type XAxisLabel = string;
+export type YAxisLabel = string;
+/**
+ * When multiple charts are drawn, then they will be layed out horizontically or vertically.
+ */
+export type VerticalLayout = boolean;
+/**
+ * The name for this data series
+ */
+export type Label = string;
+/**
+ * Determines the draw order of the series. Dataseries with lower numbers are drawn on top of ones with higher numbers.
+ */
+export type DrawOrder = number;
+/**
+ * If two dataseries have the same 'Chart' name, they will be drawn in the same chart. Otherwise they will get their own chart. If the name ends with #pivot# then a separat chart will be drawn for each pivoted dataseries.
+ */
+export type Chart = string;
+export type DrawingStyle = "bar" | "line" | "bubble";
+/**
+ * To disable points, set this to 0.
+ */
+export type PointRadius = number;
+export type PointStyle =
+  | "circle"
+  | "cross"
+  | "crossRot"
+  | "dash"
+  | "line"
+  | "rect"
+  | "rectRounded"
+  | "rectRot"
+  | "star"
+  | "triangle";
+/**
+ * The inner color of the bars if you chose Drawing Type 'bar' or the inner colors of the points if you chose Drawing Type 'line'.
+ */
+export type PointOrBarColor = string;
+export type LineColor = string;
+/**
+ * In case of Drawing Type 'bar' this determines the bar's border line width.
+ */
+export type LineWidth = number;
+/**
+ * Specify dash length and space-between-dashes length like this: [10, 5].
+ */
+export type LineDashStyle = string;
+/**
+ * Check this box to turn a line chart into an area chart.
+ */
+export type LineAreaFill = boolean;
+/**
+ * Valid only for Bubble Chart type.
+ */
+export type PointRadius1 = number;
+/**
+ * You can specify a column in the input data to autogenerate dataseries for each distinct entry in this column. E.g. if you have a table with columns [city, timestamp, temperature] and specify 'city' as pivot column, then you will get a line for each city.
+ */
+export type PivotColumn = string;
+/**
+ * The data used to draw this data series.
+ */
+export type Data = {
+  /**
+   * If timeseries is checked in the settings, then this should be an ISO String date like 2023-11-04T22:47:52.351152+00:00. But this works with many other formats as well.
+   */
+  x: string;
+  y: number;
+  r?: PointRadius1;
+  pivot?: PivotColumn;
+  [k: string]: unknown;
+}[];
+export type Dataseries = {
+  label: Label;
+  order?: DrawOrder;
+  chartName?: Chart;
+  type: DrawingStyle;
+  radius?: PointRadius;
+  pointStyle?: PointStyle;
+  backgroundColor?: PointOrBarColor;
+  borderColor?: LineColor;
+  borderWidth?: LineWidth;
+  borderDash?: LineDashStyle;
+  fill?: LineAreaFill;
+  data?: Data;
+  [k: string]: unknown;
+}[];
+
+export interface ConfigureTheChart {
+  settings?: GlobalSettings;
+  dataseries?: Dataseries;
+  [k: string]: unknown;
+}
+export interface GlobalSettings {
+  title?: Title;
+  subTitle?: Subtitle;
+  timeseries?: TimeseriesChart;
+  xAxisLabel?: XAxisLabel;
+  yAxisLabel?: YAxisLabel;
+  columnLayout?: VerticalLayout;
+  [k: string]: unknown;
+}

package/src/definition-schema.json

@@ -48,6 +48,7 @@
             "order": 2,
             "items": {
                 "type": "object",
+                "required": ["label", "type"],
                 "properties": {
                     "label": {
                         "title": "Label",
@@ -93,11 +94,13 @@
                         "title": "Point or Bar Color",
                         "description": "The inner color of the bars if you chose Drawing Type 'bar' or the inner colors of the points if you chose Drawing Type 'line'.",
                         "type": "color",
+                        "color": true,
                         "order": 8
                     },
                     "borderColor": {
                         "title": "Line Color",
                         "type": "color",
+                        "color": true,
                         "order": 9
                     },
                     "borderWidth": {
@@ -126,6 +129,7 @@
                         "buffersize": 1000,
                         "items": {
                             "type": "object",
+                            "required": ["x", "y"],
                             "properties": {
                                 "x": {
                                     "description": "If timeseries is checked in the settings, then this should be an ISO String date like 2023-11-04T22:47:52.351152+00:00. But this works with many other formats as well.",

package/src/widget-linechart.ts

@@ -7,12 +7,15 @@ import tinycolor from "tinycolor2";
 // import 'chartjs-adapter-dayjs-4/dist/chartjs-adapter-dayjs-4.esm';
 // import 'chartjs-adapter-moment';
 // import 'chartjs-adapter-date-fns';
-import { InputData, Data, Dataseries } from './types.js'
+import { ConfigureTheChart } from './definition-schema.js';
+
+type Dataseries = Exclude<ConfigureTheChart['dataseries'], undefined>[number]
+type Data = Exclude<Dataseries['data'], undefined>[number]
 
 export class WidgetLinechart extends LitElement {
   
   @property({type: Object}) 
-  inputData = {} as InputData
+  inputData?: ConfigureTheChart
 
   @state()
   private canvasList: Map<string, {chart?: any, dataSets: Dataseries[]}> = new Map()
@@ -33,7 +36,7 @@ export class WidgetLinechart extends LitElement {
 
   transformInputData() {
 
-    if (!this?.inputData?.dataseries.length) return
+    if (!this?.inputData?.dataseries?.length) return
 
     // reset all existing chart dataseries
     this.canvasList.forEach(chartM => chartM.dataSets = [])
@@ -46,7 +49,7 @@ export class WidgetLinechart extends LitElement {
       }
 
       // pivot data
-      const distincts = [...new Set(ds.data.map((d: Data) => d.pivot))]
+      const distincts = [...new Set(ds.data?.map((d: Data) => d.pivot))]
       const derivedBgColors = tinycolor(ds.backgroundColor).monochromatic(distincts.length).map((c: any) => c.toHexString())
       const derivedBdColors = tinycolor(ds.borderColor).monochromatic(distincts.length).map((c: any) => c.toHexString())
 
@@ -63,10 +66,10 @@ export class WidgetLinechart extends LitElement {
             borderWidth: ds.borderWidth,
             borderDash: ds.borderDash,
             fill: ds.fill,
-            data: ds.data.filter(d => d.pivot === piv)
+            data: ds.data?.filter(d => d.pivot === piv)
           }
           // If the chartName ends with :pivot: then create a seperate chart for each pivoted dataseries
-          const chartName = ds.chartName.endsWith('#pivot#') ? ds.chartName + piv : ds.chartName
+          const chartName = ds.chartName?.endsWith('#pivot#') ? ds.chartName + piv : ds.chartName ?? ''
           if (!this.canvasList.has(chartName)) {
             // initialize new charts
             this.canvasList.set(chartName, {chart: undefined, dataSets: [] as Dataseries[]})
@@ -103,11 +106,10 @@ export class WidgetLinechart extends LitElement {
     })
   }
 
-  xAxisType() {
+  xAxisType(): "linear" | "logarithmic" | "category" | "time" | "timeseries" | undefined {
     if (this.inputData?.settings?.timeseries) return 'time'
-    const onePoint = this.inputData.dataseries?.[0].data?.[0]
-    // @ts-ignore
-    if (onePoint && !isNaN(onePoint.x)) return 'linear'
+    const onePoint = this.inputData?.dataseries?.[0].data?.[0]
+    if (!isNaN(Number(onePoint?.x))) return 'linear'
     return 'category'
   }