@redseed/redseed-ui-vue3 8.32.2 → 8.33.0

package/index.js

@@ -12,6 +12,7 @@ export * from './src/components/Button'
 export * from './src/components/ButtonGroup'
 export * from './src/components/Card'
 export * from './src/components/CardGroup'
+export * from './src/components/Chart'
 export * from './src/components/Comment'
 export * from './src/components/Disclosure'
 export * from './src/components/Drawer'

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@redseed/redseed-ui-vue3",
-    "version": "8.32.2",
+    "version": "8.33.0",
     "description": "RedSeed UI Vue 3 components",
     "main": "index.js",
     "repository": "https://github.com/redseedtraining/redseed-ui",
@@ -12,6 +12,8 @@
     "license": "ISC",
     "dependencies": {
         "@heroicons/vue": "2.2.0",
+        "apexcharts": "5.13.0",
+        "vue3-apexcharts": "1.11.1",
         "@vueuse/components": "14.2.1",
         "@vueuse/core": "14.2.1",
         "@vueuse/integrations": "14.2.1",

package/src/components/Chart/BarChart.vue

@@ -0,0 +1,68 @@
+<script setup>
+// ApexCharts touches window/DOM, so this component renders client-side only
+// (guarded by the `mounted` ref). VueApexCharts is imported and used locally
+// so consumers don't need to install the global plugin via app.use().
+import { ref, computed, onMounted } from 'vue'
+import VueApexCharts from 'vue3-apexcharts'
+import { resolveTheme, baseChartOptions, deepMergeOptions } from './chartTheme'
+
+const props = defineProps({
+    // ApexCharts bar series shape: [{ name, data: [...] }]
+    series: {
+        type: Array,
+        default: () => [],
+    },
+    // x-axis category labels
+    categories: {
+        type: Array,
+        default: () => [],
+    },
+    height: {
+        type: [Number, String],
+        default: 350,
+    },
+    // Stack the series instead of grouping them side by side
+    stacked: {
+        type: Boolean,
+        default: false,
+    },
+    // Escape hatch — deep-merged over the rsui defaults
+    options: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+const root = ref(null)
+const mounted = ref(false)
+const theme = ref(resolveTheme(null))
+
+onMounted(() => {
+    theme.value = resolveTheme(root.value)
+    mounted.value = true
+})
+
+const chartOptions = computed(() =>
+    deepMergeOptions(
+        baseChartOptions({
+            type: 'bar',
+            theme: theme.value,
+            height: props.height,
+            categories: props.categories,
+            stacked: props.stacked,
+        }),
+        props.options,
+    ),
+)
+</script>
+<template>
+    <div ref="root" class="rsui-chart">
+        <VueApexCharts
+            v-if="mounted"
+            type="bar"
+            :height="height"
+            :series="series"
+            :options="chartOptions"
+        />
+    </div>
+</template>

package/src/components/Chart/DoughnutChart.vue

@@ -0,0 +1,62 @@
+<script setup>
+// ApexCharts touches window/DOM, so this component renders client-side only
+// (guarded by the `mounted` ref). VueApexCharts is imported and used locally
+// so consumers don't need to install the global plugin via app.use().
+import { ref, computed, onMounted } from 'vue'
+import VueApexCharts from 'vue3-apexcharts'
+import { resolveTheme, baseChartOptions, deepMergeOptions } from './chartTheme'
+
+const props = defineProps({
+    // Donut series is a flat array of numbers, one per slice
+    series: {
+        type: Array,
+        default: () => [],
+    },
+    // Slice labels, parallel to `series`
+    labels: {
+        type: Array,
+        default: () => [],
+    },
+    height: {
+        type: [Number, String],
+        default: 350,
+    },
+    // Escape hatch — deep-merged over the rsui defaults
+    options: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+const root = ref(null)
+const mounted = ref(false)
+const theme = ref(resolveTheme(null))
+
+onMounted(() => {
+    theme.value = resolveTheme(root.value)
+    mounted.value = true
+})
+
+const chartOptions = computed(() =>
+    deepMergeOptions(
+        baseChartOptions({
+            type: 'donut',
+            theme: theme.value,
+            height: props.height,
+            labels: props.labels,
+        }),
+        props.options,
+    ),
+)
+</script>
+<template>
+    <div ref="root" class="rsui-chart">
+        <VueApexCharts
+            v-if="mounted"
+            type="donut"
+            :height="height"
+            :series="series"
+            :options="chartOptions"
+        />
+    </div>
+</template>

package/src/components/Chart/LineChart.vue

@@ -0,0 +1,62 @@
+<script setup>
+// ApexCharts touches window/DOM, so this component renders client-side only
+// (guarded by the `mounted` ref). VueApexCharts is imported and used locally
+// so consumers don't need to install the global plugin via app.use().
+import { ref, computed, onMounted } from 'vue'
+import VueApexCharts from 'vue3-apexcharts'
+import { resolveTheme, baseChartOptions, deepMergeOptions } from './chartTheme'
+
+const props = defineProps({
+    // ApexCharts line series shape: [{ name, data: [...] }]
+    series: {
+        type: Array,
+        default: () => [],
+    },
+    // x-axis category labels
+    categories: {
+        type: Array,
+        default: () => [],
+    },
+    height: {
+        type: [Number, String],
+        default: 350,
+    },
+    // Escape hatch — deep-merged over the rsui defaults
+    options: {
+        type: Object,
+        default: () => ({}),
+    },
+})
+
+const root = ref(null)
+const mounted = ref(false)
+const theme = ref(resolveTheme(null))
+
+onMounted(() => {
+    theme.value = resolveTheme(root.value)
+    mounted.value = true
+})
+
+const chartOptions = computed(() =>
+    deepMergeOptions(
+        baseChartOptions({
+            type: 'line',
+            theme: theme.value,
+            height: props.height,
+            categories: props.categories,
+        }),
+        props.options,
+    ),
+)
+</script>
+<template>
+    <div ref="root" class="rsui-chart">
+        <VueApexCharts
+            v-if="mounted"
+            type="line"
+            :height="height"
+            :series="series"
+            :options="chartOptions"
+        />
+    </div>
+</template>

package/src/components/Chart/chartTheme.js

@@ -0,0 +1,161 @@
+import { mergeWith } from 'lodash'
+
+/**
+ * Shared theming for the rsui chart components (LineChart / BarChart /
+ * DoughnutChart). These wrap ApexCharts, which renders its own SVG and is
+ * styled through JS options rather than CSS classes — so the rsui look lives
+ * here as an options object built from the library's design tokens.
+ *
+ * Tokens are CSS custom properties (HSLA) defined in the tailwindcss package.
+ * We read them at runtime via getComputedStyle so charts automatically follow
+ * dark mode and any per-app brand overrides. The static fallbacks below mirror
+ * the token values in `packages/tailwindcss/colors.css` and cover environments
+ * where getComputedStyle returns nothing (SSR, happy-dom tests, pre-mount).
+ */
+
+// Default categorical/series palette, in order. First six are the semantic
+// brand/info/success/warning/error/ai colours; the remaining shades extend the
+// palette when a chart has more than six series.
+const PALETTE_TOKENS = [
+    { name: '--Colors-Brand-500', fallback: 'hsla(271, 48%, 24%, 1)' },
+    { name: '--Colors-RedSeed-Blue-500', fallback: 'hsla(205, 100%, 40%, 1)' },
+    { name: '--Colors-RedSeed-Green-500', fallback: 'hsla(162, 43%, 44%, 1)' },
+    { name: '--Colors-RedSeed-Yellow-500', fallback: 'hsla(38, 100%, 51%, 1)' },
+    { name: '--Colors-RedSeed-Red-500', fallback: 'hsla(0, 85%, 44%, 1)' },
+    { name: '--Colors-RedSeed-Purple-500', fallback: 'hsla(271, 70%, 60%, 1)' },
+    { name: '--Colors-Brand-400', fallback: 'hsla(271, 23%, 39%, 1)' },
+    { name: '--Colors-RedSeed-Blue-600', fallback: 'hsla(205, 100%, 36%, 1)' },
+    { name: '--Colors-RedSeed-Green-600', fallback: 'hsla(162, 43%, 40%, 1)' },
+    { name: '--Colors-RedSeed-Yellow-600', fallback: 'hsla(38, 96%, 46%, 1)' },
+    { name: '--Colors-RedSeed-Red-600', fallback: 'hsla(0, 85%, 40%, 1)' },
+    { name: '--Colors-RedSeed-Purple-600', fallback: 'hsla(271, 55%, 54%, 1)' },
+]
+
+const TEXT_TOKEN = { name: '--Colors-Grey-900', fallback: 'hsla(220, 24%, 12%, 1)' }
+const TEXT_MUTED_TOKEN = { name: '--Colors-Grey-700', fallback: 'hsla(220, 11%, 29%, 1)' }
+const GRID_TOKEN = { name: '--Colors-Grey-200', fallback: 'hsla(220, 5%, 92%, 1)' }
+const FONT_TOKEN = { name: '--font-redseed', fallback: "'Inter', sans-serif" }
+
+function readToken(el, token) {
+    if (typeof window === 'undefined' || !el) return token.fallback
+    const value = getComputedStyle(el).getPropertyValue(token.name).trim()
+    return value || token.fallback
+}
+
+/**
+ * Resolve the rsui design tokens into concrete colour/font values.
+ * Pass the chart's root element so per-subtree CSS-var overrides apply;
+ * falls back to the static palette when no element is available.
+ */
+export function resolveTheme(el) {
+    return {
+        colors: PALETTE_TOKENS.map((token) => readToken(el, token)),
+        text: readToken(el, TEXT_TOKEN),
+        textMuted: readToken(el, TEXT_MUTED_TOKEN),
+        grid: readToken(el, GRID_TOKEN),
+        fontFamily: readToken(el, FONT_TOKEN),
+    }
+}
+
+/**
+ * Build the rsui ApexCharts defaults for a given chart type. Consumers layer
+ * their own `options` over the result via deepMergeOptions().
+ *
+ * @param {'line'|'bar'|'donut'} type
+ * @param {object} theme         result of resolveTheme()
+ * @param {number|string} height
+ * @param {string[]} [categories] x-axis labels (line/bar)
+ * @param {string[]} [labels]     slice labels (donut)
+ * @param {boolean} [stacked]     bar only
+ */
+export function baseChartOptions({ type, theme, height, categories, labels, stacked = false }) {
+    const options = {
+        chart: {
+            type,
+            height,
+            fontFamily: theme.fontFamily,
+            foreColor: theme.textMuted,
+            toolbar: { show: false },
+            zoom: { enabled: false },
+        },
+        colors: theme.colors,
+        dataLabels: { enabled: false },
+        legend: {
+            position: 'bottom',
+            horizontalAlign: 'center',
+            fontFamily: theme.fontFamily,
+            labels: { colors: theme.text },
+            markers: { strokeWidth: 0 },
+            itemMargin: { horizontal: 8, vertical: 4 },
+        },
+        tooltip: {
+            followCursor: true,
+            style: { fontFamily: theme.fontFamily },
+        },
+    }
+
+    if (type === 'line') {
+        options.chart.stacked = false
+        options.stroke = { curve: 'smooth', width: 3 }
+        options.markers = { size: 0, hover: { size: 5 } }
+        options.grid = { borderColor: theme.grid, strokeDashArray: 4 }
+        options.xaxis = axis(categories, theme)
+        options.yaxis = { labels: { style: { colors: theme.textMuted } } }
+    }
+
+    if (type === 'bar') {
+        options.chart.stacked = !!stacked
+        options.stroke = { show: stacked, width: stacked ? 1 : 0, colors: ['transparent'] }
+        options.plotOptions = {
+            bar: {
+                borderRadius: 6,
+                borderRadiusApplication: stacked ? 'around' : 'end',
+                columnWidth: '55%',
+            },
+        }
+        options.grid = { borderColor: theme.grid, strokeDashArray: 4 }
+        options.xaxis = axis(categories, theme)
+        options.yaxis = { labels: { style: { colors: theme.textMuted } } }
+    }
+
+    if (type === 'donut') {
+        options.labels = labels || []
+        options.stroke = { width: 0 }
+        options.plotOptions = {
+            pie: {
+                donut: {
+                    size: '68%',
+                    labels: {
+                        show: true,
+                        total: {
+                            show: true,
+                            color: theme.textMuted,
+                            fontFamily: theme.fontFamily,
+                        },
+                        value: { color: theme.text, fontFamily: theme.fontFamily },
+                    },
+                },
+            },
+        }
+    }
+
+    return options
+}
+
+function axis(categories, theme) {
+    return {
+        categories: categories || [],
+        labels: { style: { colors: theme.textMuted } },
+        axisBorder: { color: theme.grid },
+        axisTicks: { color: theme.grid },
+    }
+}
+
+// Arrays from the consumer's options replace defaults wholesale; plain objects
+// continue to deep-merge so partial overrides (e.g. grid.borderColor) still work.
+const replaceArrays = (objValue, srcValue) => (Array.isArray(srcValue) ? srcValue : undefined)
+
+/** Deep-merge a consumer `options` object over the rsui defaults. */
+export function deepMergeOptions(base, overrides) {
+    return mergeWith({}, base, overrides || {}, replaceArrays)
+}

package/src/components/Chart/index.js

@@ -0,0 +1,9 @@
+import LineChart from './LineChart.vue'
+import BarChart from './BarChart.vue'
+import DoughnutChart from './DoughnutChart.vue'
+
+export {
+    LineChart,
+    BarChart,
+    DoughnutChart,
+}