zz-chart - npm Package Compare versions

Comparing version 0.1.0-beta.10 to 0.1.0-beta.11

lib/chart/view.d.ts

@@ -9,3 +9,3 @@ /// <reference types="react" resolution-mode="require"/>
 import { ViewStrategyManager } from '../strategy/index.js';
-import { AnnotationOption, AxisOption, CoordinateOption, Data, InteractionSteps, LegendOption, Options, Size, Theme, ThemeOptions, TitleOption, TooltipOption, ViewOption } from '../types/index.js';
+import { AnnotationOption, AxisOption, CoordinateOption, Data, InteractionSteps, LegendOption, Options, ScaleOption, Size, Theme, ThemeOptions, TitleOption, TooltipOption, ViewOption } from '../types/index.js';
 import EventEmitter from './event-emitter.js';
@@ -97,2 +97,9 @@ export declare class View extends EventEmitter {
     /**
+     * 对x y 度量进行配置。
+     * ```
+     * @param field 度量 x y
+     * @param scaleOption 度量配置
+     */
+    scale(field: string, axisOption: ScaleOption): View;
+    /**
      * 创建坐标系
@@ -99,0 +106,0 @@ * @private

lib/chart/view.js

@@ -178,2 +178,17 @@ import { isBoolean, isObject, set } from 'lodash';
     /**
+     * 对x y 度量进行配置。
+     * ```
+     * @param field 度量 x y
+     * @param scaleOption 度量配置
+     */
+    scale(field, axisOption) {
+        if (isBoolean(field)) {
+            set(this.options, ['scale'], field);
+        }
+        else {
+            set(this.options, ['scale', field], axisOption);
+        }
+        return this;
+    }
+    /**
      * 创建坐标系
@@ -180,0 +195,0 @@ * @private

lib/components/axis.d.ts

 import { AxisOpt } from '../types/index.js';
 import { BaseComponent } from './base.js';
-import { axisAutoSize } from './uplot-lib/index.js';
 export declare class Axis extends BaseComponent<Record<'x' | 'y', AxisOpt>> {
@@ -9,8 +8,5 @@ name: string;
     getOptions(): {
-        axes: ({
-            size?: undefined;
-        } | {
-            size: typeof axisAutoSize;
-        })[];
+        axes: {}[];
     };
+    private getYOptions;
 }

lib/components/axis.js

@@ -13,2 +13,3 @@ import { get } from 'lodash';
         this.option = get(opt, this.name, {});
+        console.log(opt);
     }
@@ -20,13 +21,18 @@ update() {
         return {
-            axes: [
-                {},
-                {
-                    size: typeof this.option === 'object' && this.option.y?.autoSize === false
-                        ? null
-                        : axisAutoSize,
-                },
-            ],
+            axes: [{}, this.getYOptions()],
         };
     }
+    getYOptions() {
+        const { autoSize, formatter: yFormatter } = (this.option.y ||
+            {});
+        const yValues = yFormatter
+            ? (_u, splits) => splits.map(d => yFormatter(String(d)))
+            : null;
+        const ySize = autoSize === false ? {} : { size: axisAutoSize };
+        return {
+            values: yValues,
+            ...ySize,
+        };
+    }
 }
 //# sourceMappingURL=axis.js.map

lib/components/shape/area.d.ts

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

lib/components/shape/bar.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="web" />
 import { Shape } from './index.js';
@@ -2,0 +3,0 @@ export declare type AdjustType = 'stack' | 'group';

lib/components/shape/line.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="web" />
 import { Shape } from './index.js';
@@ -2,0 +3,0 @@ export declare type StepType = 'start' | 'end';

lib/components/shape/point.d.ts

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

lib/index.js

@@ -5,2 +5,3 @@ import { registerShape } from './chart/view.js';
 import { Legend } from './components/legend.js';
+import { Scale } from './components/scale.js';
 import Area from './components/shape/area.js';
@@ -27,2 +28,3 @@ import Bar from './components/shape/bar.js';
 registerComponent('axis', Axis);
+registerComponent('scale', Scale);
 // 注册黑暗主题
@@ -29,0 +31,0 @@ registerTheme('dark', Dark());

lib/strategy/config.d.ts

@@ -1,2 +0,1 @@
-import uPlot from 'uplot';
 import { axesSpace } from './utils.js';
@@ -15,2 +14,3 @@ export declare const UPLOT_DEFAULT_OPTIONS: {
         };
+        font: string;
         values: (string | number)[][];
@@ -27,2 +27,3 @@ grid: {
     } | {
+        font: string;
         border: {
@@ -45,9 +46,2 @@ show: boolean;
     })[];
-    scales: {
-        x: {};
-        y: {
-            distr: number;
-            range: (_u: uPlot, dataMin: number, dataMax: number) => number[];
-        };
-    };
     cursor: {
@@ -54,0 +48,0 @@ y: boolean;

lib/strategy/config.js

@@ -9,3 +9,3 @@ import { axesSpace } from './utils.js';
     [3600 * 24, '{MM}-{DD} {HH}:{mm}', null, null, null, null, null, null, 1],
-    [3600 * 3, '{MM}-{DD} {HH}:{mm}', null, null, null, null, null, null, 1],
+    [3600 * 12, '{MM}-{DD} {HH}:{mm}', null, null, null, null, null, null, 1],
     [3600, '{HH}:{mm}', null, null, null, null, null, null, 1],
@@ -16,2 +16,3 @@ [60, '{HH}:{mm}', null, null, null, null, null, null, 1],
 ];
+const DEFAULT_FONT = '12px "Roboto", "Helvetica", "Arial", sans-serif';
 export const UPLOT_DEFAULT_OPTIONS = {
@@ -30,2 +31,3 @@ legend: {
             },
+            font: DEFAULT_FONT,
             values: AXES_X_VALUES,
@@ -46,2 +48,3 @@ grid: {
         {
+            font: DEFAULT_FONT,
             border: {
@@ -61,11 +64,2 @@ show: true,
     ],
-    scales: {
-        x: {},
-        y: {
-            distr: 1,
-            range: (_u, dataMin, dataMax) => {
-                return [Math.min(dataMin, 0), dataMax];
-            },
-        },
-    },
     cursor: {
@@ -72,0 +66,0 @@ y: false,

lib/strategy/uplot-strategy.d.ts

@@ -10,3 +10,3 @@ import UPlot from 'uplot';
 export declare class UPlotViewStrategy extends ViewStrategy {
-    shapes: ("area" | "line" | "bar" | "point")[];
+    shapes: ("line" | "area" | "bar" | "point")[];
     qt: Quadtree;
@@ -13,0 +13,0 @@ get name(): string;

lib/strategy/uplot-strategy.js

@@ -30,2 +30,3 @@ import { merge, mergeWith } from 'lodash';
             const axis = this.ctrl.components.get('axis').getOptions();
+            const scale = this.ctrl.components.get('scale').getOptions();
             const source = {
@@ -53,3 +54,3 @@ width,
             };
-            const op = mergeWith(source, coordinate, axis, theme, shapeOptions, (objValue, srcValue, key) => {
+            const op = mergeWith(source, coordinate, axis, scale, theme, shapeOptions, (objValue, srcValue, key) => {
                 if (Array.isArray(objValue) && Array.isArray(srcValue)) {
@@ -72,3 +73,3 @@ if (key === 'plugins') {
     get component() {
-        return ['axis', 'tooltip', ...SHAPES];
+        return ['axis', 'scale', 'tooltip', ...SHAPES];
     }
@@ -75,0 +76,0 @@ get isElementAction() {

lib/types/options.d.ts

@@ -37,3 +37,10 @@ /// <reference types="react" resolution-mode="require"/>
     tooltip?: TooltipOption;
-    axis?: Record<'x' | 'y', AxisOption>;
+    scale?: {
+        x?: ScaleOption;
+        y?: ScaleOption;
+    };
+    axis?: {
+        x?: AxisOption;
+        y?: AxisOption;
+    };
     line?: LineShapeOption;
@@ -66,2 +73,7 @@ area?: AreaShapeOption;
 }
+export interface ScaleOption {
+    time?: boolean;
+    min?: number;
+    max?: number;
+}
 export declare type CoordinateOption = CoordinateOpt | boolean;
@@ -74,2 +86,3 @@ export interface CoordinateOpt {
     autoSize?: boolean;
+    formatter?: (value: string | number) => string | number;
     min?: number;
@@ -76,0 +89,0 @@ max?: number;

lib/utils/component.d.ts

@@ -9,2 +9,2 @@ import { ValueOf } from '../index.js';
 export declare type ShapeType = ValueOf<typeof ShapeType>;
-export declare const SHAPE_TYPES: ("area" | "line" | "bar" | "point")[];
+export declare const SHAPE_TYPES: ("line" | "area" | "bar" | "point")[];

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

446566

increased by2.85%

Number of package files

177

increased by1.72%

Lines of code

11856

increased by2.66%

No dependency changes