zz-chart - npm Package Compare versions

Comparing version 0.1.0-beta.35 to 0.1.0-beta.36

lib/chart/view.js

@@ -257,3 +257,3 @@ import { isBoolean, isObject, merge, set } from 'lodash';
         set(this.options, name, option);
-        console.log(this.options);
+        // console.log(this.options);
         return this;
@@ -260,0 +260,0 @@ }

lib/components/axis.d.ts

@@ -8,5 +8,8 @@ import { AxisOpt } from '../types/index.js';
     getOptions(): {
-        axes: {}[];
+        axes: {
+            values: (string | number)[][] | ((_u: import("uplot"), splits: string[]) => string[]);
+        }[];
     };
+    private getXOptions;
     private getYOptions;
 }

lib/components/axis.js

 import { get, isFunction } from 'lodash';
+import { AXES_X_VALUES } from '../strategy/config.js';
 import { template } from '../utils/index.js';
@@ -20,5 +21,18 @@ import { BaseComponent } from './base.js';
         return {
-            axes: [{}, this.getYOptions()],
+            axes: [this.getXOptions(), this.getYOptions()],
         };
     }
+    getXOptions() {
+        const { formatter: xFormatter } = (this.option.x || {});
+        const xValues = xFormatter
+            ? (_u, splits) => splits.map(d => {
+                return isFunction(xFormatter)
+                    ? xFormatter(String(d))
+                    : template(xFormatter, { value: d });
+            })
+            : AXES_X_VALUES;
+        return {
+            values: xValues,
+        };
+    }
     getYOptions() {
@@ -25,0 +39,0 @@ const { autoSize, formatter: yFormatter } = (this.option.y ||

lib/components/shape/area.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="web" />
 import { Shape } from './index.js';
@@ -23,5 +22,5 @@ /**
         };
+        stroke: string;
         paths: import("uplot").Series.PathBuilder;
         fill?: undefined;
-        stroke: string;
         label: string;
@@ -45,4 +44,4 @@ width: number;
         paths: import("uplot").Series.PathBuilder;
+        stroke: string;
         fill: (u: import("uplot"), seriesIdx: number) => string | CanvasGradient;
-        stroke: string;
         label: string;
@@ -85,5 +84,25 @@ width: number;
         };
+        stroke: string;
         paths: import("uplot").Series.Points.PathBuilder;
         fill?: undefined;
+        label: string;
+        width: number;
+        alpha: number;
+    } | {
+        spanGaps: boolean;
+        points: {
+            show: import("uplot").Series.Points.Show;
+            paths?: import("uplot").Series.Points.PathBuilder;
+            filter?: import("uplot").Series.Points.Filter;
+            size?: number;
+            space?: number;
+            width?: number;
+            stroke?: import("uplot").Series.Stroke;
+            dash?: number[];
+            cap?: CanvasLineCap;
+            fill?: import("uplot").Series.Fill;
+        };
+        paths: import("uplot").Series.PathBuilder;
         stroke: string;
+        fill?: undefined;
         label: string;
@@ -90,0 +109,0 @@ width: number;

lib/components/shape/bar.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="web" />
 import { Shape } from './index.js';
@@ -21,5 +20,5 @@ export declare type AdjustType = 'stack' | 'group';
     getSeries(): ({
+        stroke: string;
         paths: import("uplot").Series.PathBuilder;
         fill?: undefined;
-        stroke: string;
         label: string;
@@ -31,4 +30,4 @@ points: {
         paths: import("uplot").Series.PathBuilder;
+        stroke: string;
         fill: (u: import("uplot"), seriesIdx: number) => string | CanvasGradient;
-        stroke: string;
         label: string;
@@ -47,5 +46,13 @@ points: {
     } | {
+        stroke: string;
         paths: import("uplot").Series.Points.PathBuilder;
         fill?: undefined;
+        label: string;
+        points: {
+            show: boolean;
+        };
+    } | {
+        paths: import("uplot").Series.PathBuilder;
         stroke: string;
+        fill?: undefined;
         label: string;
@@ -52,0 +59,0 @@ points: {

lib/components/shape/line.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="web" />
 import { Shape } from './index.js';
@@ -13,5 +12,5 @@ export declare type StepType = 'start' | 'end';
     getSeries(): ({
+        stroke: string;
         paths: import("uplot").Series.PathBuilder;
         fill?: undefined;
-        stroke: string;
         label: string;
@@ -24,4 +23,4 @@ spanGaps: boolean;
         paths: import("uplot").Series.PathBuilder;
+        stroke: string;
         fill: (u: import("uplot"), seriesIdx: number) => string | CanvasGradient;
-        stroke: string;
         label: string;
@@ -42,5 +41,14 @@ spanGaps: boolean;
     } | {
+        stroke: string;
         paths: import("uplot").Series.Points.PathBuilder;
         fill?: undefined;
+        label: string;
+        spanGaps: boolean;
+        points: {
+            show: boolean;
+        };
+    } | {
+        paths: import("uplot").Series.PathBuilder;
         stroke: string;
+        fill?: undefined;
         label: string;
@@ -47,0 +55,0 @@ spanGaps: boolean;

lib/components/shape/line.js

@@ -20,3 +20,2 @@ import { getSeriesPathType } from '../../strategy/utils.js';
     getSeries() {
-        console.log(this.ctrl.getOption());
         return this.getData().map(({ color, name }) => {
@@ -23,0 +22,0 @@ return {

lib/components/shape/point.d.ts

@@ -1,2 +0,1 @@
-/// <reference types="web" />
 import uPlot from 'uplot';
@@ -3,0 +2,0 @@ import { Shape } from './index.js';

lib/strategy/config.d.ts

 import { axesSpace } from './utils.js';
+export declare const AXES_X_VALUES: (string | number)[][];
 export declare const UPLOT_DEFAULT_OPTIONS: {
@@ -3,0 +4,0 @@ legend: {

lib/strategy/config.js

 import { axesSpace } from './utils.js';
-const AXES_X_VALUES = [
+export const AXES_X_VALUES = [
     // tick incr          default           year                             month    day                        hour     min                sec       mode
@@ -4,0 +4,0 @@ [3600 * 365, '{YYYY}', null, null, null, null, null, null, 1],

lib/strategy/uplot-strategy.js

@@ -60,2 +60,5 @@ import { merge, mergeWith, omit } from 'lodash';
                     }
+                    if (key === 'axes') {
+                        return merge(objValue, srcValue);
+                    }
                     const objLonger = objValue.length > srcValue.length;
@@ -265,3 +268,6 @@ const source = objLonger ? objValue : srcValue;
                             this.ctrl.emit(ChartEvent.PLOT_MOUSEMOVE);
-                            this.ctrl.components.get('tooltip').showTooltip();
+                            const noData = !u.data[1].some(d => d !== null);
+                            if (noData) {
+                                this.ctrl.components.get('tooltip').showTooltip();
+                            }
                         }
@@ -427,3 +433,6 @@ });
         // find median position
-        y = (u.valToPos(min, u.series[sMinIdx].scale) + u.valToPos(max, u.series[sMaxIdx].scale)) / 2;
+        y =
+            (u.valToPos(min, u.series[sMinIdx].scale) +
+                u.valToPos(max, u.series[sMaxIdx].scale)) /
+                2;
     }
@@ -458,3 +467,5 @@ else {
                     // find x-scale position for a current cursor left position
-                    x = bbox.left + u.valToPos(u.data[0][u.posToIdx(cL)], u.series[0].scale);
+                    x =
+                        bbox.left +
+                            u.valToPos(u.data[0][u.posToIdx(cL)], u.series[0].scale);
                 }
@@ -461,0 +472,0 @@ }

lib/strategy/utils.d.ts

@@ -7,2 +7,3 @@ /// <reference types="web" />
 export declare function getSeriesPathType(type: ShapeType, color: string, stepType?: StepType): {
+    stroke: string;
     paths: UPlot.Series.PathBuilder;
@@ -12,2 +13,3 @@ fill?: undefined;
     paths: UPlot.Series.PathBuilder;
+    stroke: string;
     fill: (u: UPlot, seriesIdx: number) => string | CanvasGradient;
@@ -17,5 +19,11 @@ } | {
     fill: string;
+    stroke?: undefined;
 } | {
+    stroke: string;
     paths: UPlot.Series.Points.PathBuilder;
     fill?: undefined;
+} | {
+    paths: UPlot.Series.PathBuilder;
+    stroke?: undefined;
+    fill?: undefined;
 };
@@ -22,0 +30,0 @@ export declare const UPLOT_AXIS_FONT_SIZE = 12;

lib/strategy/utils.js

@@ -61,4 +61,6 @@ import UPlot from 'uplot';
     const defaultType = UPlot.paths.spline();
+    const stroke = convertRgba(color, 1);
     return ({
         [ShapeType.Line]: {
+            stroke,
             paths: stepType
@@ -72,2 +74,3 @@ ? UPlot.paths.stepped({
             paths: defaultType,
+            stroke,
             fill: (u, seriesIdx) => {
@@ -79,3 +82,3 @@ const s = u.series[seriesIdx];
                     [sc.max / 2, convertRgba(color, 0.1)],
-                    [sc.max * 2, color],
+                    [sc.max * 2, stroke],
                 ]);
@@ -89,2 +92,3 @@ },
         [ShapeType.Point]: {
+            stroke,
             paths: UPlot.paths.points(),
@@ -91,0 +95,0 @@ },

lib/utils/color.js

@@ -9,2 +9,3 @@ /**
  */
+import { trim } from "lodash";
 // eslint-disable-next-line regexp/no-unused-capturing-group
@@ -23,4 +24,10 @@ const isValidHex = (hex) => /^#([\dA-Fa-f]{3,4}){1,2}$/.test(hex);
 export function convertRgba(hex, alpha = 1) {
+    if (hex.includes('var')) {
+        const varColorStr = hex.replace(/^rgb\(var\(*/, '').replace(/\)\)/, '');
+        const varColor = getComputedStyle(document.body).getPropertyValue(varColorStr);
+        const [r, g, b] = varColor.split(',').map(d => trim(d));
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
     if (!isValidHex(hex)) {
-        throw new Error('Invalid HEX');
+        return hex;
     }
@@ -27,0 +34,0 @@ const chunkSize = Math.floor((hex.length - 1) / 3);

package.json

 {
   "name": "zz-chart",
-  "version": "0.1.0-beta.35",
+  "version": "0.1.0-beta.36",
   "type": "module",
@@ -5,0 +5,0 @@ "author": "Alauda",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

526224

increased by1.22%

Lines of code

13782

increased by1.09%

No dependency changes