@squirkle-ui/charts 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 KheangLov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,34 @@
-# Temporary Holding Version
+# @squirkle-ui/charts
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+SVG charts that follow the theme for [Squirkle UI](https://www.npmjs.com/package/squirkle-ui). Works with Vue 3 and Vue 2.7.
+
+## Install
+```bash
+npm i @squirkle-ui/charts @squirkle-ui/ui
+```
+Or get every component and add-on with [`squirkle-ui`](https://www.npmjs.com/package/squirkle-ui) and import from `squirkle-ui/charts`.
+
+Peer dependencies: `vue`, `@squirkle-ui/ui`. Set up `@squirkle-ui/ui` first (`app.use(createSquirkle())` and `@squirkle-ui/ui/styles.css`).
+
+## Usage
+```ts
+import { SqLineChart } from '@squirkle-ui/charts'        // Vue 3
+// import { SqLineChart } from '@squirkle-ui/charts/vue2' // Vue 2.7
+import '@squirkle-ui/charts/styles.css'
+```
+```vue
+<template>
+  <SqLineChart :labels="['Q1', 'Q2', 'Q3', 'Q4']" :series="[{ name: 'Revenue', data: [12, 18, 15, 22] }]" area smooth />
+  <SqBarChart :labels="['A', 'B']" :series="[{ name: 'Units', data: [4, 7] }]" stacked />
+  <SqDonutChart :data="[{ label: 'Web', value: 60 }, { label: 'App', value: 40 }]" />
+  <SqSparkline :data="[3, 5, 4, 8]" />
+</template>
+<script setup lang="ts">
+import { SqLineChart, SqBarChart, SqDonutChart, SqSparkline } from '@squirkle-ui/charts'
+</script>
+```
+Series colours come from the theme (`--sq-series-1` … `--sq-series-8`) and switch with light/dark.
+
+
+## License
+MIT © KheangLov · [Source and issues](https://github.com/KheangLov/squirkle-ui)

package/dist/styles.css

@@ -0,0 +1,38 @@
+/* Categorical series slots — validated order (light #fff / dark #161925 surfaces). */
+:root, .sq-theme--light {
+  --sq-series-1: #2a78d6; --sq-series-2: #eb6834; --sq-series-3: #1baf7a; --sq-series-4: #eda100;
+  --sq-series-5: #e87ba4; --sq-series-6: #008300; --sq-series-7: #6250d6; --sq-series-8: #e34948;
+}
+.sq-theme--dark {
+  --sq-series-1: #3987e5; --sq-series-2: #d95926; --sq-series-3: #199e70; --sq-series-4: #c98500;
+  --sq-series-5: #d55181; --sq-series-6: #008300; --sq-series-7: #9085e9; --sq-series-8: #e66767;
+}
+.sq-chart { --sq-bg: var(--sq-surface); --sq-bd: var(--sq-border); --sq-bw: 1px; --sq-r: var(--sq-radius-xl); margin: 0; padding: var(--sq-space-4); color: var(--sq-on-surface); min-width: 0; }
+.sq-chart--flat { --sq-bw: 0px; --sq-bg: transparent; padding: 0; }
+.sq-chart__title { font-size: var(--sq-text-md); font-weight: var(--sq-weight-semibold); }
+.sq-chart__subtitle { font-size: var(--sq-text-xs); color: var(--sq-muted); }
+.sq-chart__caption { margin-bottom: var(--sq-space-2); }
+.sq-chart__legend { display: flex; flex-wrap: wrap; gap: var(--sq-space-1) var(--sq-space-4); margin-bottom: var(--sq-space-2); font-size: var(--sq-text-xs); color: var(--sq-on-surface-variant); }
+.sq-chart__legend-item { display: inline-flex; align-items: center; gap: 6px; }
+.sq-chart__swatch { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
+.sq-chart__plot { position: relative; width: 100%; }
+.sq-chart__plot svg { display: block; overflow: visible; }
+.sq-chart__grid line { stroke: var(--sq-border); stroke-width: 1; }
+.sq-chart__axis text { fill: var(--sq-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.sq-chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
+.sq-chart__area { opacity: 0.14; }
+.sq-chart__dot { stroke: var(--sq-surface); stroke-width: 2; }
+.sq-chart__crosshair { stroke: var(--sq-border-strong); stroke-dasharray: 3 3; }
+.sq-chart__bar, .sq-chart__arc { transition: opacity var(--sq-duration) var(--sq-ease); cursor: default; }
+.sq-chart__bar--dim, .sq-chart__arc--dim { opacity: 0.35; }
+.sq-chart__tooltip { --sq-r: var(--sq-radius-md); position: absolute; z-index: 2; min-width: 140px; padding: 8px 10px; background: var(--sq-surface-raised); border: 1px solid var(--sq-border); box-shadow: var(--sq-elevation-3); font-size: var(--sq-text-xs); pointer-events: none; }
+.sq-chart__tooltip-title { font-weight: var(--sq-weight-semibold); margin-bottom: 4px; }
+.sq-chart__tooltip-row { display: flex; align-items: center; gap: 6px; color: var(--sq-on-surface-variant); }
+.sq-chart__tooltip-row b { margin-inline-start: auto; padding-inline-start: 12px; color: var(--sq-on-surface); font-variant-numeric: tabular-nums; }
+.sq-chart__donut { position: relative; display: flex; justify-content: center; }
+.sq-chart__donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
+.sq-chart__donut-value { font-size: var(--sq-text-2xl); font-weight: var(--sq-weight-bold); font-variant-numeric: tabular-nums; }
+.sq-chart__donut-label { font-size: var(--sq-text-xs); color: var(--sq-muted); }
+.sq-sparkline { display: inline-block; overflow: visible; vertical-align: middle; }
+.sq-sparkline__line { fill: none; stroke-width: 2; stroke-linecap: round; }
+.sq-sparkline__area { opacity: 0.12; }

package/dist/types/components/ChartFrame.vue.d.ts

@@ -0,0 +1,95 @@
+import { type PropType } from 'vue';
+/** Card, caption, legend and an accessible data table shared by every chart (internal). */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    subtitle: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    flat: BooleanConstructor;
+    legend: {
+        type: PropType<{
+            name: string;
+            color: string;
+        }[]>;
+        default: () => never[];
+    };
+    table: {
+        type: PropType<{
+            head: string[];
+            rows: (string | number)[][];
+        }>;
+        default: () => {
+            head: never[];
+            rows: never[];
+        };
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    subtitle: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    flat: BooleanConstructor;
+    legend: {
+        type: PropType<{
+            name: string;
+            color: string;
+        }[]>;
+        default: () => never[];
+    };
+    table: {
+        type: PropType<{
+            head: string[];
+            rows: (string | number)[][];
+        }>;
+        default: () => {
+            head: never[];
+            rows: never[];
+        };
+    };
+}>> & Readonly<{}>, {
+    flat: boolean;
+    title: string;
+    subtitle: string;
+    legend: {
+        name: string;
+        color: string;
+    }[];
+    table: {
+        head: string[];
+        rows: (string | number)[][];
+    };
+}, {}, {
+    SqShape: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        watchKey: {
+            type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        clip: BooleanConstructor;
+    }>, {
+        active: import("vue").Ref<boolean, boolean>;
+        w: import("vue").Ref<number, number>;
+        h: import("vue").Ref<number, number>;
+        bw: import("vue").Ref<number, number>;
+        d: import("vue").ComputedRef<string>;
+        strokeD: import("vue").ComputedRef<string>;
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        watchKey: {
+            type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+            default: undefined;
+        };
+        clip: BooleanConstructor;
+    }>> & Readonly<{}>, {
+        clip: boolean;
+        watchKey: string | number | boolean | unknown[] | Record<string, any>;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/components/SqBarChart.vue.d.ts

@@ -0,0 +1,254 @@
+import { type PropType } from 'vue';
+import { type Series } from '../utils';
+/** Grouped or stacked bars with squircle data-ends, vertical or horizontal. */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    labels: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    series: {
+        type: PropType<Series[]>;
+        default: () => never[];
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    subtitle: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    stacked: BooleanConstructor;
+    horizontal: BooleanConstructor;
+    radius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    flat: BooleanConstructor;
+    format: {
+        type: PropType<(v: number) => string>;
+        default: undefined;
+    };
+}>, {
+    fmtCell: (v: number | null | undefined) => string;
+    box: import("vue").Ref<HTMLElement | null, HTMLElement | null>;
+    w: import("vue").Ref<number, number>;
+    hover: import("vue").Ref<{
+        cat: number;
+        x: number;
+        y: number;
+    } | null, {
+        cat: number;
+        x: number;
+        y: number;
+    } | {
+        cat: number;
+        x: number;
+        y: number;
+    } | null>;
+    y: import("vue").ComputedRef<{
+        ticks: number[];
+        min: number;
+        max: number;
+    }>;
+    bars: import("vue").ComputedRef<{
+        key: string;
+        d: string;
+        color: string;
+        cat: number;
+        cx: number;
+        cy: number;
+    }[]>;
+    gridLine: (t: number) => {
+        x1: number;
+        x2: number;
+        y1: number;
+        y2: number;
+    };
+    valueTick: (t: number) => {
+        x: number;
+        y: number;
+        'text-anchor': string;
+        'dominant-baseline'?: undefined;
+    } | {
+        x: number;
+        y: number;
+        'text-anchor': string;
+        'dominant-baseline': string;
+    };
+    catTick: (i: number) => {
+        x: number;
+        y: number;
+        'text-anchor': string;
+        'dominant-baseline': string;
+    } | {
+        x: number;
+        y: number;
+        'text-anchor': string;
+        'dominant-baseline'?: undefined;
+    };
+    colorOf: (i: number) => string;
+    fmt: (v: number) => string;
+    tipStyle: import("vue").ComputedRef<{
+        right?: undefined;
+        top?: undefined;
+        left?: undefined;
+    } | {
+        right: string;
+        top: string;
+        left?: undefined;
+    } | {
+        left: string;
+        top: string;
+        right?: undefined;
+    }>;
+    legend: import("vue").ComputedRef<{
+        name: string;
+        color: string;
+    }[]>;
+    table: import("vue").ComputedRef<{
+        head: string[];
+        rows: (string | number)[][];
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    labels: {
+        type: PropType<string[]>;
+        default: () => never[];
+    };
+    series: {
+        type: PropType<Series[]>;
+        default: () => never[];
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    subtitle: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: number;
+    };
+    stacked: BooleanConstructor;
+    horizontal: BooleanConstructor;
+    radius: {
+        type: NumberConstructor;
+        default: number;
+    };
+    flat: BooleanConstructor;
+    format: {
+        type: PropType<(v: number) => string>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    flat: boolean;
+    title: string;
+    subtitle: string;
+    labels: string[];
+    series: Series[];
+    height: number;
+    format: (v: number) => string;
+    stacked: boolean;
+    horizontal: boolean;
+    radius: number;
+}, {}, {
+    ChartFrame: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        subtitle: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        flat: BooleanConstructor;
+        legend: {
+            type: PropType<{
+                name: string;
+                color: string;
+            }[]>;
+            default: () => never[];
+        };
+        table: {
+            type: PropType<{
+                head: string[];
+                rows: (string | number)[][];
+            }>;
+            default: () => {
+                head: never[];
+                rows: never[];
+            };
+        };
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        subtitle: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        flat: BooleanConstructor;
+        legend: {
+            type: PropType<{
+                name: string;
+                color: string;
+            }[]>;
+            default: () => never[];
+        };
+        table: {
+            type: PropType<{
+                head: string[];
+                rows: (string | number)[][];
+            }>;
+            default: () => {
+                head: never[];
+                rows: never[];
+            };
+        };
+    }>> & Readonly<{}>, {
+        flat: boolean;
+        title: string;
+        subtitle: string;
+        legend: {
+            name: string;
+            color: string;
+        }[];
+        table: {
+            head: string[];
+            rows: (string | number)[][];
+        };
+    }, {}, {
+        SqShape: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            watchKey: {
+                type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            clip: BooleanConstructor;
+        }>, {
+            active: import("vue").Ref<boolean, boolean>;
+            w: import("vue").Ref<number, number>;
+            h: import("vue").Ref<number, number>;
+            bw: import("vue").Ref<number, number>;
+            d: import("vue").ComputedRef<string>;
+            strokeD: import("vue").ComputedRef<string>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            watchKey: {
+                type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            clip: BooleanConstructor;
+        }>> & Readonly<{}>, {
+            clip: boolean;
+            watchKey: string | number | boolean | unknown[] | Record<string, any>;
+        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/types/components/SqDonutChart.vue.d.ts

@@ -0,0 +1,186 @@
+import { type PropType } from 'vue';
+import { type DonutDatum } from '../utils';
+/** Pie / donut with a 2px surface gap between segments; legend always shown for 2+ segments. */
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<DonutDatum[]>;
+        default: () => never[];
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    subtitle: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Ring thickness as a fraction of the radius; 1 = pie. */
+    thickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    totalLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    flat: BooleanConstructor;
+    format: {
+        type: PropType<(v: number) => string>;
+        default: undefined;
+    };
+}>, {
+    hover: import("vue").Ref<number, number>;
+    total: import("vue").ComputedRef<number>;
+    fmt: (v: number) => string;
+    arcs: import("vue").ComputedRef<{
+        label: string;
+        color: string;
+        d: string;
+    }[]>;
+    legend: import("vue").ComputedRef<{
+        name: string;
+        color: string;
+    }[]>;
+    table: import("vue").ComputedRef<{
+        head: string[];
+        rows: (string | number)[][];
+    }>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    data: {
+        type: PropType<DonutDatum[]>;
+        default: () => never[];
+    };
+    title: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    subtitle: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    size: {
+        type: NumberConstructor;
+        default: number;
+    };
+    /** Ring thickness as a fraction of the radius; 1 = pie. */
+    thickness: {
+        type: NumberConstructor;
+        default: number;
+    };
+    totalLabel: {
+        type: StringConstructor;
+        default: string;
+    };
+    flat: BooleanConstructor;
+    format: {
+        type: PropType<(v: number) => string>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    flat: boolean;
+    title: string;
+    subtitle: string;
+    size: number;
+    data: DonutDatum[];
+    format: (v: number) => string;
+    thickness: number;
+    totalLabel: string;
+}, {}, {
+    ChartFrame: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        subtitle: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        flat: BooleanConstructor;
+        legend: {
+            type: PropType<{
+                name: string;
+                color: string;
+            }[]>;
+            default: () => never[];
+        };
+        table: {
+            type: PropType<{
+                head: string[];
+                rows: (string | number)[][];
+            }>;
+            default: () => {
+                head: never[];
+                rows: never[];
+            };
+        };
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        title: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        subtitle: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        flat: BooleanConstructor;
+        legend: {
+            type: PropType<{
+                name: string;
+                color: string;
+            }[]>;
+            default: () => never[];
+        };
+        table: {
+            type: PropType<{
+                head: string[];
+                rows: (string | number)[][];
+            }>;
+            default: () => {
+                head: never[];
+                rows: never[];
+            };
+        };
+    }>> & Readonly<{}>, {
+        flat: boolean;
+        title: string;
+        subtitle: string;
+        legend: {
+            name: string;
+            color: string;
+        }[];
+        table: {
+            head: string[];
+            rows: (string | number)[][];
+        };
+    }, {}, {
+        SqShape: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+            watchKey: {
+                type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            clip: BooleanConstructor;
+        }>, {
+            active: import("vue").Ref<boolean, boolean>;
+            w: import("vue").Ref<number, number>;
+            h: import("vue").Ref<number, number>;
+            bw: import("vue").Ref<number, number>;
+            d: import("vue").ComputedRef<string>;
+            strokeD: import("vue").ComputedRef<string>;
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+            watchKey: {
+                type: (ObjectConstructor | BooleanConstructor | ArrayConstructor | StringConstructor | NumberConstructor)[];
+                default: undefined;
+            };
+            clip: BooleanConstructor;
+        }>> & Readonly<{}>, {
+            clip: boolean;
+            watchKey: string | number | boolean | unknown[] | Record<string, any>;
+        }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;