minerva-design 1.0.2 → 1.2.0

package/dist/uni/chart-canvas.js

@@ -0,0 +1,363 @@
+// Shared runtime of the uni-app chart components: finds the `<canvas
+// type="2d">` (the inner HTMLCanvasElement on H5, the SelectorQuery node in
+// mini-programs), draws the chart with the DOM-free engine and forwards
+// touches / pointers. Only `@minerva/charts/canvas` is imported so bundles
+// never include the WebGPU / WebGL2 renderers.
+import { computed, getCurrentInstance, inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, toRaw, watch, } from "vue";
+import { githubDark, resolveTokens, } from "../core/index.js";
+import { createCanvasChart, } from "./charts-canvas.js";
+import { useNativeId } from "./native-id.js";
+const themeCache = new Map();
+/** Minerva token values (`--name` keys) of the provider configuration */
+export function chartThemeVariables(config) {
+    const mode = config?.mode === "dark" ? "dark" : "light";
+    const theme = config?.theme;
+    const overrides = theme === "github-dark"
+        ? githubDark
+        : theme && typeof theme === "object"
+            ? theme
+            : undefined;
+    const key = JSON.stringify([
+        mode,
+        config?.palette ?? null,
+        config?.design ?? null,
+        overrides ?? null,
+    ]);
+    let variables = themeCache.get(key);
+    if (!variables) {
+        const { css } = resolveTokens({
+            mode,
+            palette: config?.palette,
+            design: config?.design,
+            overrides,
+        });
+        variables = Object.fromEntries(Object.entries(css).map(([name, value]) => [`--${name}`, value]));
+        if (themeCache.size >= 16)
+            themeCache.clear();
+        themeCache.set(key, variables);
+    }
+    return variables;
+}
+const isPlainObject = (value) => {
+    if (!value || typeof value !== "object")
+        return false;
+    const proto = Object.getPrototypeOf(toRaw(value));
+    return proto === Object.prototype || proto === null;
+};
+/**
+ * Raw copy of a small option value: reading it through the props tracks
+ * nested changes, and the engine receives plain objects (functions and
+ * typed arrays are kept as is).
+ */
+export function plain(value) {
+    if (Array.isArray(value))
+        return value.map(plain);
+    if (isPlainObject(value)) {
+        const out = {};
+        for (const key of Object.keys(value))
+            out[key] = plain(value[key]);
+        return out;
+    }
+    return value;
+}
+/**
+ * Series with their `data` untouched (never traversed: large data sets stay
+ * cheap, and the engine keeps its cache while the array is the same).
+ */
+export function plainSeries(series) {
+    return (series ?? []).map((item) => {
+        const { data, ...rest } = item;
+        return { ...plain(rest), data: toRaw(data) };
+    });
+}
+/** Engine options of the props (like `engineOptions` of the web charts) */
+export function chartEngineOptions(props, series) {
+    return {
+        series,
+        xAxis: plain(props.xAxis),
+        yAxis: plain(props.yAxis),
+        legend: plain(props.legend),
+        tooltip: plain(props.tooltip),
+        crosshair: props.crosshair,
+        annotations: plain(props.annotations),
+        interaction: plain(props.interaction),
+        padding: plain(props.padding),
+        palette: plain(props.palette),
+        ariaLabel: props.ariaLabel,
+    };
+}
+const cssSize = (value) => typeof value === "number" ? `${value}px` : value;
+function pixelRatio() {
+    try {
+        const ratio = uni.getWindowInfo?.().pixelRatio;
+        if (ratio)
+            return ratio;
+    }
+    catch {
+        /* not available on every host */
+    }
+    try {
+        const ratio = uni.getSystemInfoSync?.().pixelRatio;
+        if (ratio)
+            return ratio;
+    }
+    catch {
+        /* not available on every host */
+    }
+    return (typeof window !== "undefined" && window.devicePixelRatio) || 1;
+}
+const noop = () => { };
+export function useCanvasChart(frame, options, listeners) {
+    const instance = getCurrentInstance();
+    const id = `mn-chart-${useNativeId().replace(/[^a-z0-9]/gi, "")}`;
+    const root = ref();
+    const plot = shallowRef(null);
+    const config = inject("minerva:config", null);
+    const variables = computed(() => chartThemeVariables(config?.value));
+    const engineOptions = computed(options);
+    const rootStyle = computed(() => [
+        "position: relative",
+        `width: ${cssSize(frame().width) ?? "100%"}`,
+        `height: ${cssSize(frame().height) ?? "320px"}`,
+    ].join("; "));
+    let chart = null;
+    let element = null;
+    let observer;
+    let retry;
+    let disposed = false;
+    let size = { width: -1, height: -1, ratio: -1 };
+    let offset = { left: 0, top: 0 };
+    const offs = [];
+    function create(canvas, width, height) {
+        if (disposed || chart)
+            return;
+        const ratio = pixelRatio();
+        size = { width, height, ratio };
+        const created = createCanvasChart({
+            canvas,
+            width,
+            height,
+            pixelRatio: ratio,
+            options: engineOptions.value,
+            theme: { variables: variables.value },
+        });
+        chart = created;
+        offs.push(created.on("hover", (event) => listeners.hover?.(event)), created.on("click", (event) => listeners.click?.(event)), created.on("plotClick", (event) => listeners.plotClick?.(event)), created.on("zoom", (event) => listeners.zoom?.(event)), created.on("drop", (event) => listeners.drop?.(event)), created.on("layout", (rect) => (plot.value = { ...rect })));
+        const rect = created.getPlotRect();
+        plot.value = rect ? { ...rect } : null;
+    }
+    function apply(width, height) {
+        const ratio = pixelRatio();
+        if (!chart ||
+            (width === size.width && height === size.height && ratio === size.ratio))
+            return;
+        size = { width, height, ratio };
+        chart.resize(width, height, ratio);
+    }
+    function query(fields, done) {
+        try {
+            uni
+                .createSelectorQuery()
+                .in(instance?.proxy)
+                .select(`#${id}`)
+                .fields(fields, noop)
+                .exec((result) => done((Array.isArray(result) ? result[0] : null)));
+        }
+        catch {
+            done(null);
+        }
+    }
+    function remember(info) {
+        offset = { left: info.left ?? 0, top: info.top ?? 0 };
+    }
+    /** Measures the canvas again and resizes the chart */
+    function measure() {
+        if (!chart || disposed)
+            return;
+        if (element) {
+            const rect = element.getBoundingClientRect();
+            apply(rect.width, rect.height);
+            return;
+        }
+        query({ size: true, rect: true }, (info) => {
+            if (!info || disposed)
+                return;
+            remember(info);
+            apply(info.width ?? 0, info.height ?? 0);
+        });
+    }
+    function attachNode(attempt = 0) {
+        retry = undefined;
+        query({ node: true, size: true, rect: true }, (info) => {
+            if (disposed || chart)
+                return;
+            if (!info?.node) {
+                // uni-mp renders <canvas> after the first setData (`r0`): the node
+                // may only be queryable a little after mount
+                if (attempt < 5)
+                    retry = setTimeout(() => attachNode(attempt + 1), 50);
+                return;
+            }
+            remember(info);
+            create(info.node, info.width ?? 0, info.height ?? 0);
+        });
+    }
+    /** H5: uni's `<canvas>` wraps a real canvas element */
+    function innerCanvas() {
+        const value = root.value;
+        const host = value && typeof value === "object" && "$el" in value ? value.$el : value;
+        const found = host && typeof host.querySelector === "function"
+            ? host.querySelector("canvas")
+            : null;
+        return found && typeof found.getContext === "function" ? found : null;
+    }
+    const pointerAt = (event) => {
+        const rect = element.getBoundingClientRect();
+        return [event.clientX - rect.left, event.clientY - rect.top];
+    };
+    // Mouse / pen on H5 (touches arrive through the touch events)
+    const pointer = {
+        pointerdown(event) {
+            if (event.pointerType === "touch" || !chart)
+                return;
+            try {
+                element?.setPointerCapture?.(event.pointerId);
+            }
+            catch {
+                /* capture is optional */
+            }
+            chart.pointerDown(...pointerAt(event), { id: event.pointerId });
+        },
+        pointermove(event) {
+            if (event.pointerType === "touch" || !chart)
+                return;
+            chart.pointerMove(...pointerAt(event), { id: event.pointerId });
+        },
+        pointerup(event) {
+            if (event.pointerType === "touch" || !chart)
+                return;
+            chart.pointerUp(...pointerAt(event), { id: event.pointerId });
+        },
+        pointercancel(event) {
+            if (event.pointerType === "touch" || !chart)
+                return;
+            chart.getController().pointerCancel({ id: event.pointerId });
+        },
+        pointerleave(event) {
+            if (event.pointerType === "touch" || !chart || event.buttons)
+                return;
+            chart.pointerLeave();
+        },
+        // Ctrl / ⌘ + wheel (or any wheel with `interaction.wheel: "always"`)
+        // zooms, like the web charts
+        wheel(event) {
+            const interaction = engineOptions.value.interaction;
+            const always = typeof interaction === "object" && interaction.wheel === "always";
+            if (!chart ||
+                interaction === false ||
+                !(always || event.ctrlKey || event.metaKey))
+                return;
+            event.preventDefault();
+            const factor = Math.min(2, Math.max(0.5, Math.exp(event.deltaY * 0.002)));
+            chart.zoomAt(...pointerAt(event), factor);
+        },
+    };
+    function attachElement(canvas) {
+        element = canvas;
+        const rect = canvas.getBoundingClientRect();
+        create(canvas, rect.width, rect.height);
+        for (const [type, listener] of Object.entries(pointer))
+            canvas.addEventListener(type, listener, {
+                passive: type !== "wheel",
+            });
+        if (typeof ResizeObserver !== "undefined") {
+            observer = new ResizeObserver(() => measure());
+            observer.observe(canvas);
+        }
+    }
+    function touches(list) {
+        if (!list)
+            return [];
+        const rect = element?.getBoundingClientRect();
+        return Array.from(list, (touch, index) => {
+            const client = typeof touch.clientX === "number" && typeof touch.clientY === "number";
+            return {
+                x: rect && client
+                    ? touch.clientX - rect.left
+                    : typeof touch.x === "number"
+                        ? touch.x
+                        : (touch.clientX ?? 0) - offset.left,
+                y: rect && client
+                    ? touch.clientY - rect.top
+                    : typeof touch.y === "number"
+                        ? touch.y
+                        : (touch.clientY ?? 0) - offset.top,
+                identifier: touch.identifier ?? index,
+            };
+        });
+    }
+    function onTouchStart(event) {
+        chart?.touchStart(touches(event.changedTouches ?? event.touches));
+    }
+    function onTouchMove(event) {
+        chart?.touchMove(touches(event.touches ?? event.changedTouches));
+    }
+    function onTouchEnd(event) {
+        chart?.touchEnd(touches(event.changedTouches ?? event.touches));
+    }
+    function onTouchCancel(event) {
+        const list = touches(event.changedTouches ?? event.touches);
+        chart?.touchCancel(list.length ? list : undefined);
+    }
+    watch(engineOptions, (next) => chart?.setOptions(next));
+    watch(variables, (next) => chart?.setTheme({ variables: next }));
+    watch(() => [frame().width, frame().height], () => nextTick(measure));
+    onMounted(() => {
+        nextTick(() => {
+            if (disposed)
+                return;
+            const canvas = innerCanvas();
+            if (canvas)
+                attachElement(canvas);
+            else
+                attachNode();
+        });
+        uni.onWindowResize?.(measure);
+    });
+    onBeforeUnmount(() => {
+        disposed = true;
+        if (retry !== undefined)
+            clearTimeout(retry);
+        observer?.disconnect();
+        uni.offWindowResize?.(measure);
+        if (element)
+            for (const [type, listener] of Object.entries(pointer))
+                element.removeEventListener(type, listener);
+        offs.splice(0).forEach((off) => off());
+        chart?.destroy();
+        chart = null;
+        element = null;
+    });
+    const handle = {
+        resetZoom: () => chart?.resetZoom(),
+        getView: () => chart?.getView() ?? null,
+        setView: (view) => chart?.setView(view),
+        getRenderer: () => (chart ? "canvas2d" : null),
+        getInstance: () => chart,
+        resize: () => {
+            size = { width: -1, height: -1, ratio: -1 };
+            measure();
+        },
+    };
+    return {
+        id,
+        root,
+        plot,
+        rootStyle,
+        handle,
+        onTouchStart,
+        onTouchMove,
+        onTouchEnd,
+        onTouchCancel,
+    };
+}

package/dist/uni/chart-types.d.ts

@@ -0,0 +1,135 @@
+import type { PropType } from "vue";
+import type { CanvasChartInstance, ChartAnnotation, ChartAxisOptions, ChartInteractionOptions, ChartLegendOptions, ChartPadding, ChartSeries, ChartTooltipOptions, ChartView, QuadrantAxisLabels, QuadrantCorner, QuadrantPoint, QuadrantRegions } from "./charts-canvas.js";
+export type { CanvasChartInstance, ChartAnnotation, ChartAxisOptions, ChartHoverEvent, ChartHoverItem, ChartInteractionOptions, ChartLegendOptions, ChartPadding, ChartPlotClickEvent, ChartSeries, ChartSeriesData, ChartTooltipOptions, ChartView, QuadrantAxisLabels, QuadrantCorner, QuadrantPoint, QuadrantRegion, QuadrantRegions, } from "./charts-canvas.js";
+/** Imperative handle of the chart components (template `ref`) */
+export interface ChartHandle {
+    /** Shows the whole data range */
+    resetZoom(): void;
+    /** Visible range, `null` until the canvas is ready */
+    getView(): ChartView | null;
+    /** Sets the visible range */
+    setView(view: Partial<ChartView>): void;
+    /** Always `canvas2d` once the canvas is ready, `null` before */
+    getRenderer(): "canvas2d" | null;
+    /** The underlying canvas chart, `null` until the canvas is ready */
+    getInstance(): CanvasChartInstance | null;
+    /** Measures the canvas again (after a layout change the chart cannot see) */
+    resize(): void;
+}
+/** Where a dragged QuadrantChart point was dropped */
+export interface QuadrantDropTarget {
+    /** Data coordinates of the drop */
+    x: number;
+    y: number;
+    /** Quadrant of the drop, as seen on screen */
+    quadrant: QuadrantCorner;
+}
+/** Props shared by every chart component */
+export declare const chartCommonProps: {
+    /** Height of the chart (the legend included); numbers are pixels, strings any CSS length (rpx included) */
+    height: {
+        type: PropType<number | string>;
+        default: number;
+    };
+    /** Width of the chart; numbers are pixels */
+    width: {
+        type: PropType<number | string>;
+        default: string;
+    };
+    /** Legend; shown by default when several series have a name */
+    legend: {
+        type: PropType<boolean | ChartLegendOptions>;
+        default: undefined;
+    };
+    /** Tooltip; `false` disables it (`render` may return a string) */
+    tooltip: {
+        type: PropType<boolean | ChartTooltipOptions>;
+        default: undefined;
+    };
+    /** Vertical guide line following the finger */
+    crosshair: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    /** Background areas and reference lines */
+    annotations: PropType<readonly ChartAnnotation[]>;
+    /** Pinch zoom, pan, double tap reset; `false` makes the chart static */
+    interaction: {
+        type: PropType<boolean | ChartInteractionOptions>;
+        default: undefined;
+    };
+    /** Space around the plot area, in pixels */
+    padding: PropType<ChartPadding>;
+    /** Series colors (defaults to the theme colors) */
+    palette: PropType<readonly string[]>;
+    /** Accessible name of the chart */
+    ariaLabel: StringConstructor;
+    /** Keeps the page from scrolling while a finger moves on the chart */
+    disableScroll: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+};
+/** X / Y axes (every chart but QuadrantChart) */
+export declare const chartAxisProps: {
+    /** X axis */
+    xAxis: PropType<ChartAxisOptions>;
+    /** Y axis */
+    yAxis: PropType<ChartAxisOptions>;
+};
+/** Data series */
+export declare const chartSeriesProps: {
+    /** Data series (replace the array or a `data` array to update the chart) */
+    readonly series: {
+        readonly type: PropType<readonly ChartSeries[]>;
+        readonly required: true;
+    };
+};
+/** Props of QuadrantChart (besides the common ones) */
+export declare const quadrantChartProps: {
+    /** Points to place (replace the array to update the chart) */
+    readonly points: {
+        readonly type: PropType<readonly QuadrantPoint[]>;
+        readonly required: true;
+    };
+    /** Range of the horizontal axis (default `[0, 10]`) */
+    readonly xDomain: PropType<[number, number]>;
+    /** Range of the vertical axis (default `[0, 10]`) */
+    readonly yDomain: PropType<[number, number]>;
+    /** X value of the vertical divider (the middle of `xDomain` by default) */
+    readonly xSplit: NumberConstructor;
+    /** Y value of the horizontal divider (the middle of `yDomain` by default) */
+    readonly ySplit: NumberConstructor;
+    /** Titles and colors of the quadrants */
+    readonly quadrants: PropType<QuadrantRegions>;
+    /** Title of the horizontal axis */
+    readonly xLabel: StringConstructor;
+    /** Title of the vertical axis */
+    readonly yLabel: StringConstructor;
+    /** Texts at the ends of the dividers, drawn inside the plot */
+    readonly axisLabels: PropType<QuadrantAxisLabels>;
+    /** Shows the numeric ticks of the axes (default `true`) */
+    readonly showTicks: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    /** Reverses the horizontal axis */
+    readonly reverseX: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    /** Draws the labels next to the dots (default `true`) */
+    readonly showLabels: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    /** Dot diameter in pixels (default 12) */
+    readonly pointSize: NumberConstructor;
+    /** Name of the points in the tooltip */
+    readonly name: StringConstructor;
+    /** Lets the user drag the dots (default: when a `pointDrop` listener is set) */
+    readonly draggable: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+};

package/dist/uni/chart-types.js

@@ -0,0 +1,84 @@
+// Booleans and boolean unions default to `undefined` (not Vue's `false`) so
+// the engine defaults apply when they are omitted.
+/** Props shared by every chart component */
+export const chartCommonProps = {
+    /** Height of the chart (the legend included); numbers are pixels, strings any CSS length (rpx included) */
+    height: { type: [Number, String], default: 320 },
+    /** Width of the chart; numbers are pixels */
+    width: {
+        type: [Number, String],
+        default: "100%",
+    },
+    /** Legend; shown by default when several series have a name */
+    legend: {
+        type: [Boolean, Object],
+        default: undefined,
+    },
+    /** Tooltip; `false` disables it (`render` may return a string) */
+    tooltip: {
+        type: [Boolean, Object],
+        default: undefined,
+    },
+    /** Vertical guide line following the finger */
+    crosshair: { type: Boolean, default: undefined },
+    /** Background areas and reference lines */
+    annotations: Array,
+    /** Pinch zoom, pan, double tap reset; `false` makes the chart static */
+    interaction: {
+        type: [Boolean, Object],
+        default: undefined,
+    },
+    /** Space around the plot area, in pixels */
+    padding: Object,
+    /** Series colors (defaults to the theme colors) */
+    palette: Array,
+    /** Accessible name of the chart */
+    ariaLabel: String,
+    /** Keeps the page from scrolling while a finger moves on the chart */
+    disableScroll: { type: Boolean, default: undefined },
+};
+/** X / Y axes (every chart but QuadrantChart) */
+export const chartAxisProps = {
+    /** X axis */
+    xAxis: Object,
+    /** Y axis */
+    yAxis: Object,
+};
+/** Data series */
+export const chartSeriesProps = {
+    /** Data series (replace the array or a `data` array to update the chart) */
+    series: { type: Array, required: true },
+};
+/** Props of QuadrantChart (besides the common ones) */
+export const quadrantChartProps = {
+    /** Points to place (replace the array to update the chart) */
+    points: { type: Array, required: true },
+    /** Range of the horizontal axis (default `[0, 10]`) */
+    xDomain: Array,
+    /** Range of the vertical axis (default `[0, 10]`) */
+    yDomain: Array,
+    /** X value of the vertical divider (the middle of `xDomain` by default) */
+    xSplit: Number,
+    /** Y value of the horizontal divider (the middle of `yDomain` by default) */
+    ySplit: Number,
+    /** Titles and colors of the quadrants */
+    quadrants: Object,
+    /** Title of the horizontal axis */
+    xLabel: String,
+    /** Title of the vertical axis */
+    yLabel: String,
+    /** Texts at the ends of the dividers, drawn inside the plot */
+    axisLabels: Object,
+    /** Shows the numeric ticks of the axes (default `true`) */
+    showTicks: { type: Boolean, default: undefined },
+    /** Reverses the horizontal axis */
+    reverseX: { type: Boolean, default: undefined },
+    /** Draws the labels next to the dots (default `true`) */
+    showLabels: { type: Boolean, default: undefined },
+    /** Dot diameter in pixels (default 12) */
+    pointSize: Number,
+    /** Name of the points in the tooltip */
+    name: String,
+    /** Lets the user drag the dots (default: when a `pointDrop` listener is set) */
+    draggable: { type: Boolean, default: undefined },
+};

package/dist/uni/charts-canvas.d.ts

@@ -0,0 +1 @@
+export * from "../charts/canvas.js";

package/dist/uni/charts-canvas.js

@@ -0,0 +1,8 @@
+// Private entry of the platform packages (Taro, uni-app, WeChat, React
+// Native): the DOM-free part of the engine only, so their bundles never
+// include the WebGPU / WebGL2 renderers nor the DOM chart.
+export { createCanvasChart, drawScene, } from "../charts/engine/canvas.js";
+export { createChartController, scenePrimitives, } from "../charts/engine/controller.js";
+export { formatCompact } from "../charts/engine/format.js";
+export { barSeries, DEFAULT_QUADRANT_COLORS, lineSeries, quadrantCenter, quadrantChartOptions, quadrantOf, scatterSeries, } from "../charts/engine/presets.js";
+export { toCss } from "../charts/engine/color.js";

package/dist/uni/index.d.ts

@@ -124,3 +124,9 @@ export { default as TooltipProvider } from "./TooltipProvider.vue.js";
 export { confirm, toast } from "./feedback-store.js";
 export { useConfirm, useToast } from "./feedback-context.js";
 export { default as DatePicker } from "./DatePicker.vue.js";
+export { default as Chart } from "./Chart.vue.js";
+export { default as LineChart } from "./LineChart.vue.js";
+export { default as BarChart } from "./BarChart.vue.js";
+export { default as ScatterChart } from "./ScatterChart.vue.js";
+export { default as QuadrantChart } from "./QuadrantChart.vue.js";
+export type { ChartAnnotation, ChartAxisOptions, ChartHandle, ChartHoverEvent, ChartHoverItem, ChartInteractionOptions, ChartLegendOptions, ChartPadding, ChartPlotClickEvent, ChartSeries, ChartSeriesData, ChartTooltipOptions, ChartView, QuadrantAxisLabels, QuadrantCorner, QuadrantDropTarget, QuadrantPoint, QuadrantRegion, QuadrantRegions, } from "./chart-types.js";

package/dist/uni/index.js

@@ -124,3 +124,9 @@ export { default as TooltipProvider } from "./TooltipProvider.vue";
 export { confirm, toast } from "./feedback-store.js";
 export { useConfirm, useToast } from "./feedback-context.js";
 export { default as DatePicker } from "./DatePicker.vue";
+// Charts: canvas renderer of the chart engine (outside the component contract matrix)
+export { default as Chart } from "./Chart.vue";
+export { default as LineChart } from "./LineChart.vue";
+export { default as BarChart } from "./BarChart.vue";
+export { default as ScatterChart } from "./ScatterChart.vue";
+export { default as QuadrantChart } from "./QuadrantChart.vue";

package/dist/weapp/bar-chart/index.js

@@ -0,0 +1 @@
+Component(require('../controls.js').barChart.definition);

package/dist/weapp/bar-chart/index.json

@@ -0,0 +1 @@
+{"component":true}

package/dist/weapp/bar-chart/index.wxml

@@ -0,0 +1 @@
+<view class="mn-chart" style="display:block;position:relative;width:{{chartWidth}};height:{{chartHeight}}"><canvas type="2d" class="mn-chart-canvas" style="display:block;width:100%;height:100%" disable-scroll="{{disableScroll}}" aria-role="img" aria-label="{{ariaLabel}}" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd" bindtouchcancel="onTouchCancel"></canvas></view>

package/dist/weapp/bar-chart/index.wxss

@@ -0,0 +1 @@
+@import "../controls.wxss";

package/dist/weapp/chart/index.js

@@ -0,0 +1 @@
+Component(require('../controls.js').chart.definition);

package/dist/weapp/chart/index.json

@@ -0,0 +1 @@
+{"component":true}

package/dist/weapp/chart/index.wxml

@@ -0,0 +1 @@
+<view class="mn-chart" style="display:block;position:relative;width:{{chartWidth}};height:{{chartHeight}}"><canvas type="2d" class="mn-chart-canvas" style="display:block;width:100%;height:100%" disable-scroll="{{disableScroll}}" aria-role="img" aria-label="{{ariaLabel}}" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd" bindtouchcancel="onTouchCancel"></canvas></view>

package/dist/weapp/chart/index.wxss

@@ -0,0 +1 @@
+@import "../controls.wxss";