@lightdash/common 0.2129.1 → 0.2131.0

package/dist/cjs/visualizations/helpers/styles/gridStyles.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Get grid line styling for line charts
+ */
+export declare const getLineChartGridStyle: () => {
+    show: boolean;
+    lineStyle: {
+        color: string;
+        type: "solid";
+    };
+};
+/**
+ * Get grid line styling for bar charts
+ */
+export declare const getBarChartGridStyle: () => {
+    show: boolean;
+    lineStyle: {
+        color: string;
+        type: readonly [3, 3];
+    };
+};
+//# sourceMappingURL=gridStyles.d.ts.map

package/dist/cjs/visualizations/helpers/styles/gridStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridStyles.d.ts","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/gridStyles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;;;CAMhC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;;;CAM/B,CAAC"}

package/dist/cjs/visualizations/helpers/styles/gridStyles.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBarChartGridStyle = exports.getLineChartGridStyle = void 0;
+const themeColors_1 = require("./themeColors");
+/**
+ * Get grid line styling for line charts
+ */
+const getLineChartGridStyle = () => ({
+    show: true,
+    lineStyle: {
+        color: themeColors_1.GRAY_1,
+        type: 'solid',
+    },
+});
+exports.getLineChartGridStyle = getLineChartGridStyle;
+/**
+ * Get grid line styling for bar charts
+ */
+const getBarChartGridStyle = () => ({
+    show: true,
+    lineStyle: {
+        color: themeColors_1.GRAY_2,
+        type: [3, 3], // [dash length, gap length]
+    },
+});
+exports.getBarChartGridStyle = getBarChartGridStyle;
+//# sourceMappingURL=gridStyles.js.map

package/dist/cjs/visualizations/helpers/styles/gridStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gridStyles.js","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/gridStyles.ts"],"names":[],"mappings":";;;AAAA,+CAA+C;AAE/C;;GAEG;AACI,MAAM,qBAAqB,GAAG,GAAG,EAAE,CAAC,CAAC;IACxC,IAAI,EAAE,IAAI;IACV,SAAS,EAAE;QACP,KAAK,EAAE,oBAAM;QACb,IAAI,EAAE,OAAgB;KACzB;CACJ,CAAC,CAAC;AANU,QAAA,qBAAqB,yBAM/B;AAEH;;GAEG;AACI,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CAAC;IACvC,IAAI,EAAE,IAAI;IACV,SAAS,EAAE;QACP,KAAK,EAAE,oBAAM;QACb,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAU,EAAE,4BAA4B;KACtD;CACJ,CAAC,CAAC;AANU,QAAA,oBAAoB,wBAM9B"}

package/dist/cjs/visualizations/helpers/styles/legendStyles.d.ts

@@ -0,0 +1,49 @@
+type LegendIconType = 'line' | 'square';
+export declare const getLegendStyle: (iconType?: LegendIconType) => {
+    textStyle: {
+        color: string;
+        fontSize: number;
+        fontWeight: number;
+        padding: number[];
+    };
+    pageButtonItemGap: number;
+    pageButtonGap: number;
+    pageTextStyle: {
+        color: string;
+        fontSize: number;
+        fontWeight: number;
+    };
+    pageIconColor: string;
+    pageIconInactiveColor: string;
+    pageIconSize: number;
+    icon: string;
+    itemWidth: number;
+    itemHeight: number;
+    itemGap: number;
+} | {
+    textStyle: {
+        color: string;
+        fontSize: number;
+        fontWeight: number;
+        padding: number[];
+    };
+    pageButtonItemGap: number;
+    pageButtonGap: number;
+    pageTextStyle: {
+        color: string;
+        fontSize: number;
+        fontWeight: number;
+    };
+    pageIconColor: string;
+    pageIconInactiveColor: string;
+    pageIconSize: number;
+    icon: string;
+    itemStyle: {
+        borderRadius: number;
+    };
+    itemWidth: number;
+    itemHeight: number;
+    itemGap: number;
+};
+export {};
+//# sourceMappingURL=legendStyles.d.ts.map

package/dist/cjs/visualizations/helpers/styles/legendStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legendStyles.d.ts","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/legendStyles.ts"],"names":[],"mappings":"AAEA,KAAK,cAAc,GAAG,MAAM,GAAG,QAAQ,CAAC;AAMxC,eAAO,MAAM,cAAc,cAAc,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BrD,CAAC"}

package/dist/cjs/visualizations/helpers/styles/legendStyles.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getLegendStyle = void 0;
+const themeColors_1 = require("./themeColors");
+// looks like -o-
+const lineSeriesLegendIcon = 'path://M0,5 L5,5 L5,7 L0,7 Z M13,5 L18,5 L18,7 L13,7 Z M9,2 A4,4 0 1,1 9,10 A4,4 0 1,1 9,2 Z';
+const getLegendStyle = (iconType = 'square') => ({
+    itemWidth: iconType === 'line' ? 18 : 12,
+    itemHeight: 12,
+    itemGap: 16,
+    ...(iconType === 'line'
+        ? {
+            icon: lineSeriesLegendIcon,
+        }
+        : {
+            icon: 'roundRect',
+            itemStyle: { borderRadius: 3 },
+        }),
+    textStyle: {
+        color: themeColors_1.GRAY_7,
+        fontSize: 12,
+        fontWeight: 500,
+        padding: [0, 0, 0, 2],
+    },
+    // Navigation controls (for scrollable legends)
+    pageButtonItemGap: 16, // Space between left arrow, page text, and right arrow
+    pageButtonGap: 8, // Space between legend items and navigation controls
+    pageTextStyle: {
+        color: themeColors_1.GRAY_7,
+        fontSize: 12,
+        fontWeight: 500,
+    },
+    pageIconColor: themeColors_1.GRAY_7, // Active chevron color
+    pageIconInactiveColor: themeColors_1.GRAY_3, // Inactive chevron color
+    pageIconSize: 12,
+});
+exports.getLegendStyle = getLegendStyle;
+//# sourceMappingURL=legendStyles.js.map

package/dist/cjs/visualizations/helpers/styles/legendStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legendStyles.js","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/legendStyles.ts"],"names":[],"mappings":";;;AAAA,+CAA+C;AAI/C,iBAAiB;AACjB,MAAM,oBAAoB,GACtB,8FAA8F,CAAC;AAE5F,MAAM,cAAc,GAAG,CAAC,WAA2B,QAAQ,EAAE,EAAE,CAAC,CAAC;IACpE,SAAS,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE;IACxC,UAAU,EAAE,EAAE;IACd,OAAO,EAAE,EAAE;IACX,GAAG,CAAC,QAAQ,KAAK,MAAM;QACnB,CAAC,CAAC;YACI,IAAI,EAAE,oBAAoB;SAC7B;QACH,CAAC,CAAC;YACI,IAAI,EAAE,WAAW;YACjB,SAAS,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE;SACjC,CAAC;IACR,SAAS,EAAE;QACP,KAAK,EAAE,oBAAM;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,GAAG;QACf,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;KACxB;IACD,+CAA+C;IAC/C,iBAAiB,EAAE,EAAE,EAAE,uDAAuD;IAC9E,aAAa,EAAE,CAAC,EAAE,qDAAqD;IACvE,aAAa,EAAE;QACX,KAAK,EAAE,oBAAM;QACb,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,GAAG;KAClB;IACD,aAAa,EAAE,oBAAM,EAAE,uBAAuB;IAC9C,qBAAqB,EAAE,oBAAM,EAAE,yBAAyB;IACxD,YAAY,EAAE,EAAE;CACnB,CAAC,CAAC;AA7BU,QAAA,cAAc,kBA6BxB"}

package/dist/cjs/visualizations/helpers/styles/pieChartStyles.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Get pie slice styling
+ */
+export declare const getPieSliceStyle: (isDonut: boolean) => {
+    itemStyle: {
+        borderRadius: number;
+        borderColor: string;
+        borderWidth: number;
+    };
+} | {
+    itemStyle?: undefined;
+};
+/**
+ * Get external label styling for pie charts
+ */
+export declare const getPieExternalLabelStyle: () => {
+    fontSize: number;
+    lineHeight: number;
+    rich: {
+        name: {
+            color: string;
+            fontWeight: number;
+            fontSize: number;
+            lineHeight: number;
+        };
+        value: {
+            color: string;
+            fontWeight: number;
+            fontSize: number;
+            lineHeight: number;
+        };
+    };
+};
+/**
+ * Get label line (connector) styling for pie chart external labels
+ */
+export declare const getPieLabelLineStyle: () => {
+    lineStyle: {
+        color: string;
+    };
+};
+/**
+ * Get internal label styling for pie charts (labels inside slices)
+ */
+export declare const getPieInternalLabelStyle: () => {
+    fontWeight: number;
+    fontSize: number;
+};
+//# sourceMappingURL=pieChartStyles.d.ts.map

package/dist/cjs/visualizations/helpers/styles/pieChartStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pieChartStyles.d.ts","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/pieChartStyles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,gBAAgB,YAAa,OAAO;;;;;;;;CASrC,CAAC;AAEb;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;;;;;;;;;;;;;;;CAkBnC,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;CAI/B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,wBAAwB;;;CAGnC,CAAC"}

package/dist/cjs/visualizations/helpers/styles/pieChartStyles.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPieInternalLabelStyle = exports.getPieLabelLineStyle = exports.getPieExternalLabelStyle = exports.getPieSliceStyle = void 0;
+const themeColors_1 = require("./themeColors");
+/**
+ * Get pie slice styling
+ */
+const getPieSliceStyle = (isDonut) => isDonut
+    ? {
+        itemStyle: {
+            borderRadius: 4,
+            borderColor: themeColors_1.WHITE,
+            borderWidth: 2,
+        },
+    }
+    : {};
+exports.getPieSliceStyle = getPieSliceStyle;
+/**
+ * Get external label styling for pie charts
+ */
+const getPieExternalLabelStyle = () => ({
+    fontSize: 12,
+    lineHeight: 18,
+    // Rich text styles for different parts of the label
+    rich: {
+        name: {
+            color: themeColors_1.GRAY_6,
+            fontWeight: 500,
+            fontSize: 12,
+            lineHeight: 18,
+        },
+        value: {
+            color: themeColors_1.GRAY_7,
+            fontWeight: 600,
+            fontSize: 12,
+            lineHeight: 18,
+        },
+    },
+});
+exports.getPieExternalLabelStyle = getPieExternalLabelStyle;
+/**
+ * Get label line (connector) styling for pie chart external labels
+ */
+const getPieLabelLineStyle = () => ({
+    lineStyle: {
+        color: themeColors_1.GRAY_3,
+    },
+});
+exports.getPieLabelLineStyle = getPieLabelLineStyle;
+/**
+ * Get internal label styling for pie charts (labels inside slices)
+ */
+const getPieInternalLabelStyle = () => ({
+    fontWeight: 500,
+    fontSize: 12,
+});
+exports.getPieInternalLabelStyle = getPieInternalLabelStyle;
+//# sourceMappingURL=pieChartStyles.js.map

package/dist/cjs/visualizations/helpers/styles/pieChartStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pieChartStyles.js","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/pieChartStyles.ts"],"names":[],"mappings":";;;AAAA,+CAA8D;AAE9D;;GAEG;AACI,MAAM,gBAAgB,GAAG,CAAC,OAAgB,EAAE,EAAE,CACjD,OAAO;IACH,CAAC,CAAC;QACI,SAAS,EAAE;YACP,YAAY,EAAE,CAAC;YACf,WAAW,EAAE,mBAAK;YAClB,WAAW,EAAE,CAAC;SACjB;KACJ;IACH,CAAC,CAAC,EAAE,CAAC;AATA,QAAA,gBAAgB,oBAShB;AAEb;;GAEG;AACI,MAAM,wBAAwB,GAAG,GAAG,EAAE,CAAC,CAAC;IAC3C,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,EAAE;IACd,oDAAoD;IACpD,IAAI,EAAE;QACF,IAAI,EAAE;YACF,KAAK,EAAE,oBAAM;YACb,UAAU,EAAE,GAAG;YACf,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACjB;QACD,KAAK,EAAE;YACH,KAAK,EAAE,oBAAM;YACb,UAAU,EAAE,GAAG;YACf,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,EAAE;SACjB;KACJ;CACJ,CAAC,CAAC;AAlBU,QAAA,wBAAwB,4BAkBlC;AAEH;;GAEG;AACI,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CAAC;IACvC,SAAS,EAAE;QACP,KAAK,EAAE,oBAAM;KAChB;CACJ,CAAC,CAAC;AAJU,QAAA,oBAAoB,wBAI9B;AAEH;;GAEG;AACI,MAAM,wBAAwB,GAAG,GAAG,EAAE,CAAC,CAAC;IAC3C,UAAU,EAAE,GAAG;IACf,QAAQ,EAAE,EAAE;CACf,CAAC,CAAC;AAHU,QAAA,wBAAwB,4BAGlC"}

package/dist/cjs/visualizations/helpers/styles/referenceLineStyles.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Get reference line styling
+ */
+export declare const getReferenceLineStyle: (lineColor?: string) => {
+    emphasis: {
+        disabled: boolean;
+    };
+    lineStyle: {
+        color: string;
+        type: readonly [2, 3];
+        width: number;
+    };
+    label: {
+        show: boolean;
+        position: "start";
+        distance: number;
+        formatter: (params: {
+            name?: string;
+            value?: number | string;
+        }) => string;
+        backgroundColor: string;
+        color: string;
+        borderWidth: number;
+        borderColor: string;
+        padding: number[];
+        borderRadius: number;
+        fontSize: number;
+        fontWeight: number;
+    };
+};
+//# sourceMappingURL=referenceLineStyles.d.ts.map

package/dist/cjs/visualizations/helpers/styles/referenceLineStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"referenceLineStyles.d.ts","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/referenceLineStyles.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,eAAO,MAAM,qBAAqB,eAAgB,MAAM;;;;;;;;;;;;;4BAgBxB;YAAE,IAAI,CAAC,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;SAAE;;;;;;;;;;CAkBzE,CAAC"}

package/dist/cjs/visualizations/helpers/styles/referenceLineStyles.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getReferenceLineStyle = void 0;
+const themeColors_1 = require("./themeColors");
+/**
+ * Get reference line styling
+ */
+const getReferenceLineStyle = (lineColor) => {
+    const defaultLineColor = lineColor || themeColors_1.GRAY_9;
+    return {
+        emphasis: {
+            disabled: true,
+        },
+        lineStyle: {
+            color: defaultLineColor,
+            type: [2, 3], // Dotted: 2px dash, 3px gap
+            width: 2,
+        },
+        label: {
+            show: true,
+            position: 'start', // Start position (left side) to avoid right-edge clipping
+            distance: -4, // Negative distance moves label into chart area
+            formatter: (params) => {
+                const text = params.name || String(params.value || '');
+                // Simple truncation - ECharts doesn't handle wrapping well for mark line labels
+                const maxChars = 15;
+                return text.length > maxChars
+                    ? `${text.substring(0, maxChars)}...`
+                    : text;
+            },
+            backgroundColor: themeColors_1.GRAY_7,
+            color: themeColors_1.WHITE,
+            borderWidth: 1,
+            borderColor: themeColors_1.GRAY_8,
+            padding: [2, 4],
+            borderRadius: 4,
+            fontSize: 11,
+            fontWeight: 500,
+        },
+    };
+};
+exports.getReferenceLineStyle = getReferenceLineStyle;
+//# sourceMappingURL=referenceLineStyles.js.map

package/dist/cjs/visualizations/helpers/styles/referenceLineStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"referenceLineStyles.js","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/referenceLineStyles.ts"],"names":[],"mappings":";;;AAAA,+CAA8D;AAE9D;;GAEG;AACI,MAAM,qBAAqB,GAAG,CAAC,SAAkB,EAAE,EAAE;IACxD,MAAM,gBAAgB,GAAG,SAAS,IAAI,oBAAM,CAAC;IAE7C,OAAO;QACH,QAAQ,EAAE;YACN,QAAQ,EAAE,IAAI;SACjB;QACD,SAAS,EAAE;YACP,KAAK,EAAE,gBAAgB;YACvB,IAAI,EAAE,CAAC,CAAC,EAAE,CAAC,CAAU,EAAE,4BAA4B;YACnD,KAAK,EAAE,CAAC;SACX;QACD,KAAK,EAAE;YACH,IAAI,EAAE,IAAI;YACV,QAAQ,EAAE,OAAgB,EAAE,0DAA0D;YACtF,QAAQ,EAAE,CAAC,CAAC,EAAE,gDAAgD;YAC9D,SAAS,EAAE,CAAC,MAAkD,EAAE,EAAE;gBAC9D,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;gBACvD,gFAAgF;gBAChF,MAAM,QAAQ,GAAG,EAAE,CAAC;gBACpB,OAAO,IAAI,CAAC,MAAM,GAAG,QAAQ;oBACzB,CAAC,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,EAAE,QAAQ,CAAC,KAAK;oBACrC,CAAC,CAAC,IAAI,CAAC;YACf,CAAC;YACD,eAAe,EAAE,oBAAM;YACvB,KAAK,EAAE,mBAAK;YACZ,WAAW,EAAE,CAAC;YACd,WAAW,EAAE,oBAAM;YACnB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;YACf,YAAY,EAAE,CAAC;YACf,QAAQ,EAAE,EAAE;YACZ,UAAU,EAAE,GAAG;SAClB;KACJ,CAAC;AACN,CAAC,CAAC;AAlCW,QAAA,qBAAqB,yBAkChC"}

package/dist/cjs/visualizations/helpers/styles/themeColors.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Theme color constants for ECharts styling
+ * Centralizes color usage across all chart style utilities
+ * Using Mantine default color palette
+ */
+export declare const GRAY_0 = "#f8f9fa";
+export declare const GRAY_1 = "#f1f3f5";
+export declare const GRAY_2 = "#e9ecef";
+export declare const GRAY_3 = "#dee2e6";
+export declare const GRAY_4 = "#ced4da";
+export declare const GRAY_5 = "#adb5bd";
+export declare const GRAY_6 = "#868e96";
+export declare const GRAY_7 = "#495057";
+export declare const GRAY_8 = "#343a40";
+export declare const GRAY_9 = "#212529";
+export declare const WHITE = "#FFFFFF";
+export declare const AXIS_TITLE_COLOR = "#747B83";
+//# sourceMappingURL=themeColors.d.ts.map

package/dist/cjs/visualizations/helpers/styles/themeColors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeColors.d.ts","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/themeColors.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,MAAM,YAAY,CAAC;AAChC,eAAO,MAAM,MAAM,YAAY,CAAC;AAGhC,eAAO,MAAM,KAAK,YAAY,CAAC;AAG/B,eAAO,MAAM,gBAAgB,YAAY,CAAC"}

package/dist/cjs/visualizations/helpers/styles/themeColors.js

@@ -0,0 +1,23 @@
+"use strict";
+/**
+ * Theme color constants for ECharts styling
+ * Centralizes color usage across all chart style utilities
+ * Using Mantine default color palette
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AXIS_TITLE_COLOR = exports.WHITE = exports.GRAY_9 = exports.GRAY_8 = exports.GRAY_7 = exports.GRAY_6 = exports.GRAY_5 = exports.GRAY_4 = exports.GRAY_3 = exports.GRAY_2 = exports.GRAY_1 = exports.GRAY_0 = void 0;
+exports.GRAY_0 = '#f8f9fa'; // theme.colors.gray[0]
+exports.GRAY_1 = '#f1f3f5'; // theme.colors.gray[1]
+exports.GRAY_2 = '#e9ecef'; // theme.colors.gray[2]
+exports.GRAY_3 = '#dee2e6'; // theme.colors.gray[3]
+exports.GRAY_4 = '#ced4da'; // theme.colors.gray[4]
+exports.GRAY_5 = '#adb5bd'; // theme.colors.gray[5]
+exports.GRAY_6 = '#868e96'; // theme.colors.gray[6]
+exports.GRAY_7 = '#495057'; // theme.colors.gray[7]
+exports.GRAY_8 = '#343a40'; // theme.colors.gray[8]
+exports.GRAY_9 = '#212529'; // theme.colors.gray[9]
+// White
+exports.WHITE = '#FFFFFF';
+// Axis title (legacy hardcoded color - between gray 5 and gray 6)
+exports.AXIS_TITLE_COLOR = '#747B83';
+//# sourceMappingURL=themeColors.js.map

package/dist/cjs/visualizations/helpers/styles/themeColors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themeColors.js","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/themeColors.ts"],"names":[],"mappings":";AAAA;;;;GAIG;;;AAEU,QAAA,MAAM,GAAG,SAAS,CAAC,CAAC,uBAAuB;AAC3C,QAAA,MAAM,GAAG,SAAS,CAAC,CAAC,uBAAuB;AAC3C,QAAA,MAAM,GAAG,SAAS,CAAC,CAAC,uBAAuB;AAC3C,QAAA,MAAM,GAAG,SAAS,CAAC,CAAC,uBAAuB;AAC3C,QAAA,MAAM,GAAG,SAAS,CAAC,CAAC,uBAAuB;AAC3C,QAAA,MAAM,GAAG,SAAS,CAAC,CAAC,uBAAuB;AAC3C,QAAA,MAAM,GAAG,SAAS,CAAC,CAAC,uBAAuB;AAC3C,QAAA,MAAM,GAAG,SAAS,CAAC,CAAC,uBAAuB;AAC3C,QAAA,MAAM,GAAG,SAAS,CAAC,CAAC,uBAAuB;AAC3C,QAAA,MAAM,GAAG,SAAS,CAAC,CAAC,uBAAuB;AAExD,QAAQ;AACK,QAAA,KAAK,GAAG,SAAS,CAAC;AAE/B,kEAAkE;AACrD,QAAA,gBAAgB,GAAG,SAAS,CAAC"}

package/dist/cjs/visualizations/helpers/styles/tooltipStyles.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Get base tooltip styling
+ */
+export declare const getTooltipStyle: () => {
+    padding: number;
+    borderColor: string;
+    borderWidth: number;
+    borderRadius: number;
+    backgroundColor: string;
+    textStyle: {
+        color: string;
+        fontSize: number;
+    };
+    extraCssText: string;
+};
+/**
+ * Format a tooltip value with pill styling (e.g. "100% - $100")
+ */
+export declare const formatTooltipValue: (value: string) => string;
+/**
+ * Format tooltip header (e.g. "Total Sales")
+ */
+export declare const formatTooltipHeader: (header: string) => string;
+/**
+ * Get tooltip divider
+ */
+export declare const getTooltipDivider: () => string;
+/**
+ * Format a color indicator (square) for tooltip (e.g. a color block)
+ */
+export declare const formatColorIndicator: (color: string) => string;
+/**
+ * Format a simple text label for tooltip (e.g. series name or category)
+ * Color: gray.7, Font size: 11px
+ */
+export declare const formatTooltipLabel: (text: string) => string;
+/**
+ * Format a tooltip row with color indicator, label, and value (stacked layout)
+ * Used for pie charts and other single-row tooltip formats
+ * @param colorIndicator - HTML string for color indicator (from formatColorIndicator)
+ * @param label - HTML string for label (from formatTooltipLabel)
+ * @param value - HTML string for value (from formatTooltipValue)
+ */
+export declare const formatTooltipRow: (colorIndicator: string, label: string, value: string) => string;
+/**
+ * Format a cartesian chart tooltip row with color indicator, series name, and value (inline layout)
+ * Used for bar/line/area charts where all elements are in a single horizontal row
+ * @param colorIndicator - HTML string for color indicator (from formatColorIndicator)
+ * @param seriesName - Series name text
+ * @param valuePill - HTML string for formatted value pill (from formatTooltipValue)
+ */
+export declare const formatCartesianTooltipRow: (colorIndicator: string, seriesName: string, valuePill: string) => string;
+//# sourceMappingURL=tooltipStyles.d.ts.map

package/dist/cjs/visualizations/helpers/styles/tooltipStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltipStyles.d.ts","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/tooltipStyles.ts"],"names":[],"mappings":"AAeA;;GAEG;AACH,eAAO,MAAM,eAAe;;;;;;;;;;;CAY1B,CAAC;AAEH;;GAEG;AACH,eAAO,MAAM,kBAAkB,UAAW,MAAM,KAAG,MAYlD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,mBAAmB,WAAY,MAAM,KAAG,MAQpD,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,QAAO,MAOpC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,oBAAoB,UAAW,MAAM,KAAG,MAUpD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,kBAAkB,SAAU,MAAM,KAAG,MAMjD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,mBACT,MAAM,SACf,MAAM,SACN,MAAM,KACd,MAWF,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,yBAAyB,mBAClB,MAAM,cACV,MAAM,aACP,MAAM,KAClB,MAiBF,CAAC"}

package/dist/cjs/visualizations/helpers/styles/tooltipStyles.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatCartesianTooltipRow = exports.formatTooltipRow = exports.formatTooltipLabel = exports.formatColorIndicator = exports.getTooltipDivider = exports.formatTooltipHeader = exports.formatTooltipValue = exports.getTooltipStyle = void 0;
+const themeColors_1 = require("./themeColors");
+/**
+ * Helper to convert style object to CSS string
+ * We need this because ECharts doesn't support style objects directly
+ */
+const stylesToString = (styles) => Object.entries(styles)
+    .map(([key, value]) => {
+    // Convert camelCase to kebab-case
+    const kebabKey = key.replace(/([A-Z])/g, '-$1').toLowerCase();
+    return `${kebabKey}: ${value}`;
+})
+    .join('; ');
+/**
+ * Get base tooltip styling
+ */
+const getTooltipStyle = () => ({
+    padding: 8,
+    borderColor: themeColors_1.GRAY_3,
+    borderWidth: 1,
+    borderRadius: 8,
+    backgroundColor: themeColors_1.WHITE,
+    textStyle: {
+        color: themeColors_1.GRAY_7,
+        fontSize: 12,
+    },
+    extraCssText: 'box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.25);',
+});
+exports.getTooltipStyle = getTooltipStyle;
+/**
+ * Format a tooltip value with pill styling (e.g. "100% - $100")
+ */
+const formatTooltipValue = (value) => {
+    const styles = stylesToString({
+        display: 'inline-block',
+        backgroundColor: themeColors_1.GRAY_0,
+        border: `1px solid ${themeColors_1.GRAY_1}`,
+        color: themeColors_1.GRAY_7,
+        padding: '2px 8px',
+        borderRadius: '6px',
+        fontWeight: 600,
+        fontSize: '12px',
+    });
+    return `<span style="${styles}">${value}</span>`;
+};
+exports.formatTooltipValue = formatTooltipValue;
+/**
+ * Format tooltip header (e.g. "Total Sales")
+ */
+const formatTooltipHeader = (header) => {
+    const styles = stylesToString({
+        color: themeColors_1.GRAY_7,
+        fontWeight: 500,
+        fontSize: '13px',
+        paddingBottom: '8px',
+    });
+    return `<div style="${styles}">${header}</div>`;
+};
+exports.formatTooltipHeader = formatTooltipHeader;
+/**
+ * Get tooltip divider
+ */
+const getTooltipDivider = () => {
+    const styles = stylesToString({
+        height: '1px',
+        backgroundColor: themeColors_1.GRAY_1,
+        marginBottom: '4px',
+    });
+    return `<div style="${styles}"></div>`;
+};
+exports.getTooltipDivider = getTooltipDivider;
+/**
+ * Format a color indicator (square) for tooltip (e.g. a color block)
+ */
+const formatColorIndicator = (color) => {
+    const styles = stylesToString({
+        display: 'inline-block',
+        width: '10px',
+        height: '10px',
+        backgroundColor: color,
+        borderRadius: '2px',
+        verticalAlign: 'middle',
+    });
+    return `<span style="${styles}"></span>`;
+};
+exports.formatColorIndicator = formatColorIndicator;
+/**
+ * Format a simple text label for tooltip (e.g. series name or category)
+ * Color: gray.7, Font size: 11px
+ */
+const formatTooltipLabel = (text) => {
+    const styles = stylesToString({
+        color: themeColors_1.GRAY_7,
+        fontSize: '11px',
+    });
+    return `<span style="${styles}">${text}</span>`;
+};
+exports.formatTooltipLabel = formatTooltipLabel;
+/**
+ * Format a tooltip row with color indicator, label, and value (stacked layout)
+ * Used for pie charts and other single-row tooltip formats
+ * @param colorIndicator - HTML string for color indicator (from formatColorIndicator)
+ * @param label - HTML string for label (from formatTooltipLabel)
+ * @param value - HTML string for value (from formatTooltipValue)
+ */
+const formatTooltipRow = (colorIndicator, label, value) => {
+    const rowStyles = stylesToString({
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+    });
+    const valueContainerStyles = stylesToString({
+        marginTop: '2px',
+        marginLeft: '16px',
+    });
+    return `<div style="${rowStyles}">${colorIndicator}${label}</div><div style="${valueContainerStyles}">${value}</div>`;
+};
+exports.formatTooltipRow = formatTooltipRow;
+/**
+ * Format a cartesian chart tooltip row with color indicator, series name, and value (inline layout)
+ * Used for bar/line/area charts where all elements are in a single horizontal row
+ * @param colorIndicator - HTML string for color indicator (from formatColorIndicator)
+ * @param seriesName - Series name text
+ * @param valuePill - HTML string for formatted value pill (from formatTooltipValue)
+ */
+const formatCartesianTooltipRow = (colorIndicator, seriesName, valuePill) => {
+    const rowStyles = stylesToString({
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        marginBottom: '2px',
+    });
+    const seriesNameStyles = stylesToString({
+        color: themeColors_1.GRAY_7,
+        flex: '1',
+        fontSize: '12px',
+    });
+    return `<div style="${rowStyles}">
+        ${colorIndicator}
+        <span style="${seriesNameStyles}">${seriesName}</span>
+        ${valuePill}
+    </div>`;
+};
+exports.formatCartesianTooltipRow = formatCartesianTooltipRow;
+//# sourceMappingURL=tooltipStyles.js.map

package/dist/cjs/visualizations/helpers/styles/tooltipStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltipStyles.js","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/tooltipStyles.ts"],"names":[],"mappings":"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"}

package/dist/cjs/visualizations/helpers/styles/valueLabelStyles.d.ts

@@ -0,0 +1,20 @@
+import { type Series } from '../../../types/savedCharts';
+/**
+ * Get value label styling for any chart series (line, bar, area, scatter, etc.)
+ * Inside: White on dark backgrounds, gray.9 on light backgrounds, weight 400
+ * Outside: gray.9 text with colored border matching series, weight 500
+ * Size: 11px
+ * @param position - Label position relative to data point
+ * @param type - Series type
+ */
+export declare const getValueLabelStyle: (position: "left" | "right" | "top" | "bottom" | "inside" | undefined, type: Series["type"]) => {
+    readonly fontSize: 11;
+    readonly fontWeight: "500";
+} | {
+    textBorderColor: string;
+    textBorderWidth: number;
+    textBorderType: string;
+    fontSize: 11;
+    fontWeight: "500";
+};
+//# sourceMappingURL=valueLabelStyles.d.ts.map

package/dist/cjs/visualizations/helpers/styles/valueLabelStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"valueLabelStyles.d.ts","sourceRoot":"","sources":["../../../../../src/visualizations/helpers/styles/valueLabelStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,KAAK,MAAM,EAAE,MAAM,4BAA4B,CAAC;AAG9E;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,aACjB,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,QAAQ,GAAG,SAAS,QAC9D,MAAM,CAAC,MAAM,CAAC;;;;;;;;;CAuBvB,CAAC"}