@flux-ui/statistics 3.0.0-next.72 → 3.0.0-next.74

package/dist/util/html.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Escapes a value for safe interpolation into HTML text content.
+ */
+export declare function escapeHtml(value: unknown): string;
+/**
+ * Escapes a value for safe interpolation into a double-quoted HTML attribute
+ * or inline style value. Prevents attribute breakout from untrusted input.
+ */
+export declare function escapeAttr(value: unknown): string;

package/dist/util/index.d.ts

@@ -1,4 +1,5 @@
 export * from './colors';
+export * from './html';
 export * from './icons';
 export * from './options';
 export * from './series';

package/dist/util/options/cartesian/buildCandlestickChartOptions.d.ts

@@ -1,6 +1,5 @@
 import { FluxStatisticsChartCandlestickSeries } from '@flux-ui/types';
-import { ChartLegendItem } from '../../../composable/useChartLegend';
-import { EChartsOption } from '../../../composable/useECharts';
+import { ChartLegendItem, EChartsOption } from '../../../composable';
 import { TooltipStyleClasses, Translator } from '../../tooltips';
 export interface CandlestickChartOptionsInput {
     readonly series: readonly FluxStatisticsChartCandlestickSeries[];

package/dist/util/options/circular/buildGaugeChartOptions.d.ts

@@ -1,6 +1,5 @@
 import { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
-import { ChartLegendItem } from '../../../composable/useChartLegend';
-import { EChartsOption } from '../../../composable/useECharts';
+import { ChartLegendItem, EChartsOption } from '../../../composable';
 import { TooltipStyleClasses, Translator } from '../../tooltips';
 export interface GaugeChartOptionsInput {
     readonly series: readonly FluxStatisticsChartGaugeSeries[];

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@flux-ui/statistics",
     "description": "Statistics components for the Flux UI library.",
-    "version": "3.0.0-next.72",
+    "version": "3.0.0-next.74",
     "type": "module",
     "license": "MIT",
     "funding": "https://github.com/sponsors/basmilius",
@@ -49,28 +49,28 @@
     "types": "./dist/index.d.ts",
     "sideEffects": false,
     "dependencies": {
-        "@basmilius/common": "^3.37.0",
-        "@basmilius/utils": "^3.37.0",
-        "@flux-ui/components": "3.0.0-next.72",
-        "@flux-ui/internals": "3.0.0-next.72",
-        "@flux-ui/types": "3.0.0-next.72",
+        "@basmilius/common": "^3.40.0",
+        "@basmilius/utils": "^3.40.0",
+        "@flux-ui/components": "3.0.0-next.74",
+        "@flux-ui/internals": "3.0.0-next.74",
+        "@flux-ui/types": "3.0.0-next.74",
         "clsx": "^2.1.1"
     },
     "peerDependencies": {
         "echarts": "^6.1.0",
         "lodash-es": "^4.18.1",
-        "vue": "^3.6.0-beta.12",
+        "vue": "^3.6.0-beta.13",
         "vue-i18n": "^11.4.4"
     },
     "devDependencies": {
-        "@basmilius/vite-preset": "^3.37.0",
+        "@basmilius/vite-preset": "^3.40.0",
         "@types/lodash-es": "^4.17.12",
         "@types/node": "^25.9.1",
         "@vitejs/plugin-vue": "^6.0.7",
         "@vue/tsconfig": "^0.9.1",
         "sass-embedded": "^1.100.0",
         "typescript": "^6.0.3",
-        "vite": "^8.0.14",
-        "vue-tsc": "^3.3.2"
+        "vite": "^8.0.16",
+        "vue-tsc": "^3.3.3"
     }
 }

package/src/component/FluxStatisticsAreaChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartAreaSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildAreaChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsBarChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartBarSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildBarChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsBoxPlotChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartBoxPlotSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildBoxPlotChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsBubbleChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartBubbleSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildBubbleChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsCandlestickChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartCandlestickSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildCandlestickChartOptions, candlestickLegendItemBuilder } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsDonutChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSlicesSetup } from '~flux/statistics/composable';
     import { buildDonutChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsHeatmapChart.vue

@@ -8,7 +8,7 @@
     setup>
     import type { FluxStatisticsChartHeatmapSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartBaseSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartBaseSetup } from '~flux/statistics/composable';
     import { buildHeatmapChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsLineChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartLineSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildLineChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsMixedChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartMixedSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildMixedChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsPercentageBar.vue

@@ -36,7 +36,7 @@
     import type { FluxStatisticsChartColor, FluxStatisticsPercentageBarItemObject } from '@flux-ui/types';
     import { clsx } from 'clsx';
     import { computed, inject, watchEffect } from 'vue';
-    import { FluxStatisticsChartLegendInjectionKey, type ChartLegendItem } from '~flux/statistics/composable';
+    import { type ChartLegendItem, FluxStatisticsChartLegendInjectionKey } from '~flux/statistics/composable';
     import $style from '~flux/statistics/css/PercentageBar.module.scss';
 
     const SEMANTIC_COLORS = ['gray', 'primary', 'danger', 'info', 'success', 'warning'] as const;

package/src/component/FluxStatisticsPieChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSlicesSetup } from '~flux/statistics/composable';
     import { buildPieChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsPolarAreaChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartPieSlice } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSlicesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSlicesSetup } from '~flux/statistics/composable';
     import { buildPolarAreaChartOptions, type ChartTooltipValueFormatter } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsRadarChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartRadarIndicator, FluxStatisticsChartRadarSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildRadarChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsRadialBar.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildGaugeChartOptions, gaugeLegendItemBuilder } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsScatterChart.vue

@@ -9,7 +9,7 @@
     setup>
     import type { FluxStatisticsChartScatterSeries } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartSeriesSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartSeriesSetup } from '~flux/statistics/composable';
     import { buildScatterChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/FluxStatisticsTreemapChart.vue

@@ -8,7 +8,7 @@
     setup>
     import type { FluxStatisticsChartTreemapNode } from '@flux-ui/types';
     import { computed } from 'vue';
-    import { useChartBaseSetup, type EChartsOption } from '~flux/statistics/composable';
+    import { type EChartsOption, useChartBaseSetup } from '~flux/statistics/composable';
     import { buildTreemapChartOptions } from '~flux/statistics/util';
     import Chart from './FluxStatisticsChart.vue';
     import $style from '~flux/statistics/css/Chart.module.scss';

package/src/component/index.ts

@@ -14,8 +14,8 @@ export { default as FluxStatisticsDonutChart } from './FluxStatisticsDonutChart.
 export { default as FluxStatisticsEmpty } from './FluxStatisticsEmpty.vue';
 export { default as FluxStatisticsGrid } from './FluxStatisticsGrid.vue';
 export { default as FluxStatisticsHeatmapChart } from './FluxStatisticsHeatmapChart.vue';
-export { default as FluxStatisticsLineChart } from './FluxStatisticsLineChart.vue';
 export { default as FluxStatisticsKpi } from './FluxStatisticsKpi.vue';
+export { default as FluxStatisticsLineChart } from './FluxStatisticsLineChart.vue';
 export { default as FluxStatisticsLegend } from './FluxStatisticsLegend.vue';
 export { default as FluxStatisticsLegendItem } from './FluxStatisticsLegendItem.vue';
 export { default as FluxStatisticsLegendScope } from './FluxStatisticsLegendScope.vue';

package/src/index.ts

@@ -1,4 +1,4 @@
-import { amber500, blue500, cyan500, emerald500, fuchsia500, green500, indigo500, lime500, orange500, pink500, purple500, red500, rose50, sky500, teal500, violet500, yellow500 } from '@flux-ui/internals';
+import { amber500, blue500, cyan500, emerald500, fuchsia500, green500, indigo500, lime500, orange500, pink500, purple500, red500, rose500, sky500, teal500, violet500, yellow500 } from '@flux-ui/internals';
 import type { FluxStatisticsChartColor } from '@flux-ui/types';
 
 export * from './component';
@@ -30,5 +30,5 @@ export const CHART_COLORFUL_COLORS: readonly FluxStatisticsChartColor[] = [
     purple500,
     fuchsia500,
     pink500,
-    rose50
+    rose500
 ] as FluxStatisticsChartColor[];

package/src/util/html.ts

@@ -0,0 +1,25 @@
+const HTML_ESCAPES: Record<string, string> = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    '\'': '&#39;'
+};
+
+const HTML_PATTERN = /[&<>"']/g;
+const ATTR_PATTERN = /[&<>"]/g;
+
+/**
+ * Escapes a value for safe interpolation into HTML text content.
+ */
+export function escapeHtml(value: unknown): string {
+    return String(value ?? '').replace(HTML_PATTERN, char => HTML_ESCAPES[char]);
+}
+
+/**
+ * Escapes a value for safe interpolation into a double-quoted HTML attribute
+ * or inline style value. Prevents attribute breakout from untrusted input.
+ */
+export function escapeAttr(value: unknown): string {
+    return String(value ?? '').replace(ATTR_PATTERN, char => HTML_ESCAPES[char]);
+}

package/src/util/icons.ts

@@ -1,5 +1,6 @@
 import { iconRegistry } from '@flux-ui/components';
 import type { FluxIconName } from '@flux-ui/types';
+import { escapeAttr } from './html';
 
 export function renderIconSvg(name: FluxIconName | undefined, color: string, size: number = 14): string {
     if (!name) {
@@ -14,7 +15,8 @@ export function renderIconSvg(name: FluxIconName | undefined, color: string, siz
 
     const [width, height, , , pathData] = icon;
     const paths = Array.isArray(pathData) ? pathData : [pathData];
-    const pathElements = paths.map(d => `<path d="${d}" fill="${color}"/>`).join('');
+    const safeColor = escapeAttr(color);
+    const pathElements = paths.map(d => `<path d="${escapeAttr(d)}" fill="${safeColor}"/>`).join('');
 
     return `<svg viewBox="0 0 ${width} ${height}" width="${size}" height="${size}" focusable="false" aria-hidden="true">${pathElements}</svg>`;
 }

package/src/util/index.ts

@@ -1,4 +1,5 @@
 export * from './colors';
+export * from './html';
 export * from './icons';
 export * from './options';
 export * from './series';

package/src/util/options/cartesian/buildCandlestickChartOptions.ts

@@ -1,7 +1,6 @@
 import type { FluxStatisticsChartCandlestickSeries } from '@flux-ui/types';
 import { merge } from 'lodash-es';
-import type { ChartLegendItem } from '~flux/statistics/composable/useChartLegend';
-import type { EChartsOption } from '~flux/statistics/composable/useECharts';
+import type { ChartLegendItem, EChartsOption } from '~flux/statistics/composable';
 import { resolveChartColor, toCandlestickSeries } from '../../series';
 import type { TooltipStyleClasses, Translator } from '../../tooltips';
 import { buildCartesianTooltip } from '../../tooltips';

package/src/util/options/circular/buildGaugeChartOptions.ts

@@ -1,7 +1,6 @@
 import type { FluxStatisticsChartGaugeSeries } from '@flux-ui/types';
 import { merge } from 'lodash-es';
-import type { ChartLegendItem } from '~flux/statistics/composable/useChartLegend';
-import type { EChartsOption } from '~flux/statistics/composable/useECharts';
+import type { ChartLegendItem, EChartsOption } from '~flux/statistics/composable';
 import { toGaugeSeries } from '../../series';
 import type { TooltipStyleClasses, Translator } from '../../tooltips';
 import { buildGaugeTooltip } from '../../tooltips';

package/src/util/tooltips/render.ts

@@ -1,4 +1,5 @@
 import { formatNumber } from '@basmilius/utils';
+import { escapeAttr, escapeHtml } from '../html';
 import { renderIconSvg } from '../icons';
 import type { ChartTooltipValueFormatter, SharedTooltipItem, TooltipParam, TooltipStyleClasses, Translator } from './types';
 
@@ -15,7 +16,7 @@ export function renderTooltip(
     }
 
     const titleHtml = title
-        ? `<div class="${styles.statisticsChartTooltipTitle}">${title}</div>`
+        ? `<div class="${styles.statisticsChartTooltipTitle}">${escapeHtml(title)}</div>`
         : '';
 
     const hasActive = activeIndex !== -1;
@@ -25,16 +26,17 @@ export function renderTooltip(
         const activeClass = isActive ? ` ${styles.isActive}` : '';
         const translatedName = item.name ? t(String(item.name)) : '';
 
+        const safeColor = escapeAttr(item.color);
         const marker = item.icon
-            ? `<div class="${styles.statisticsChartTooltipSeriesIcon}${activeClass}" style="color: ${item.color}">${renderIconSvg(item.icon, item.color, 14)}</div>`
-            : `<div class="${styles.statisticsChartTooltipSeriesColor}${activeClass}" style="background: ${item.color}"></div>`;
+            ? `<div class="${styles.statisticsChartTooltipSeriesIcon}${activeClass}" style="color: ${safeColor}">${renderIconSvg(item.icon, item.color, 14)}</div>`
+            : `<div class="${styles.statisticsChartTooltipSeriesColor}${activeClass}" style="background: ${safeColor}"></div>`;
 
         const display = valueFormatter ? valueFormatter(item.value, item) : formatValue(item.value);
 
         return `
             ${marker}
-            <div class="${styles.statisticsChartTooltipSeriesName}${activeClass}">${translatedName}</div>
-            <div class="${styles.statisticsChartTooltipSeriesValue}${activeClass}">${display}</div>
+            <div class="${styles.statisticsChartTooltipSeriesName}${activeClass}">${escapeHtml(translatedName)}</div>
+            <div class="${styles.statisticsChartTooltipSeriesValue}${activeClass}">${escapeHtml(display)}</div>
         `;
     }).join('');