make font-size config props for consistency

Author: brc-dd

lib/components/SChartBar.vue

@@ -13,22 +13,28 @@ const props = withDefaults(defineProps<{
   type?: 'horizontal' | 'vertical'
   debug?: boolean
   ticks?: number
+  tickFontSize?: string
   animate?: boolean
   tooltip?: boolean
   tooltipFormat?: (d: KV, color: string) => string
   xLabel?: string
   yLabel?: string
   xLabelOffset?: number
   yLabelOffset?: number
+  xLabelFontSize?: string
+  yLabelFontSize?: string
   maxBandwidth?: number
 }>(), {
   colors: () => ['blue'],
   type: 'vertical',
   debug: false,
   ticks: 5,
+  tickFontSize: '14px',
   animate: true,
   tooltip: true,
   tooltipFormat: (d: KV) => `${d.key} – ${d.value}`,
+  xLabelFontSize: '14px',
+  yLabelFontSize: '14px',
   maxBandwidth: 100
 })
 
@@ -110,7 +116,7 @@ function renderChart({
     .call(vertical ? d3.axisBottom(paddedScale) : d3.axisBottom(y).ticks(props.ticks))
     .selectAll('text')
     .attr('fill', c.text2)
-    .style('font-size', 'var(--chart-tick-font-size)')
+    .style('font-size', props.tickFontSize)
     .style('text-anchor', 'middle')
 
   // Remove X axis line
@@ -124,7 +130,7 @@ function renderChart({
     .call(vertical ? d3.axisLeft(y).ticks(props.ticks) : d3.axisLeft(paddedScale))
     .selectAll('text')
     .attr('fill', c.text2)
-    .style('font-size', 'var(--chart-tick-font-size)')
+    .style('font-size', props.tickFontSize)
 
   // Remove Y axis line
   svg
@@ -161,7 +167,7 @@ function renderChart({
       .attr('x', width / 2)
       .attr('y', height + xLabelOffset)
       .attr('fill', c.text2)
-      .style('font-size', 'var(--chart-label-font-size)')
+      .style('font-size', props.xLabelFontSize)
       .style('text-anchor', 'middle')
       .html(props.xLabel)
   }
@@ -172,7 +178,7 @@ function renderChart({
       .attr('y', -yLabelOffset)
       .attr('transform', 'rotate(-90)')
       .attr('fill', c.text2)
-      .style('font-size', 'var(--chart-label-font-size)')
+      .style('font-size', props.yLabelFontSize)
       .style('text-anchor', 'middle')
       .html(props.yLabel)
   }
@@ -359,7 +365,7 @@ watch(
   background-color: var(--c-bg-elv-2);
   border: 1px solid var(--c-divider);
   border-radius: 6px;
-  font-size: var(--chart-tooltip-font-size);
+  font-size: 12px;
 }
 
 :deep(.tick line) {

lib/components/SChartPie.vue

@@ -22,8 +22,10 @@ const props = withDefaults(defineProps<{
   legendFormatKey?: (d: KV) => string
   legendFormatValue?: (d: KV) => string
   legendPadding?: number
+  legendFontSize?: string
   labels?: boolean
   labelFormat?: (d: KV) => string
+  labelFontSize?: string
 }>(), {
   type: 'donut',
   half: false,
@@ -35,8 +37,10 @@ const props = withDefaults(defineProps<{
   legendFormatKey: (d: KV) => d.key,
   legendFormatValue: (d: KV) => d.value.toString(),
   legendPadding: 70,
+  legendFontSize: '14px',
   labels: false,
-  labelFormat: (d: KV) => `${d.key} – ${d.value}`
+  labelFormat: (d: KV) => `${d.key} – ${d.value}`,
+  labelFontSize: '14px'
 })
 
 const chartRef = useTemplateRef('chart')
@@ -116,7 +120,7 @@ function renderChart({
       .enter()
       .append('g')
       .attr('transform', (d, i) => `translate(0,${i * 24})`)
-      .style('font-size', 'var(--chart-legend-font-size)')
+      .style('font-size', props.legendFontSize)
 
     // Add colored rectangles to the legend
     legend
@@ -259,7 +263,7 @@ function renderChart({
       .attr('dy', '0.35em')
       .attr('fill', c.text2)
       .attr('text-anchor', (d) => leftOrRight(d) === 1 ? 'start' : 'end')
-      .style('font-size', 'var(--chart-label-font-size)')
+      .style('font-size', props.labelFontSize)
       .html((d) => props.labelFormat(d.data))
 
     if (animate) {
@@ -357,6 +361,6 @@ watch(
   background-color: var(--c-bg-elv-2);
   border: 1px solid var(--c-divider);
   border-radius: 6px;
-  font-size: var(--chart-tooltip-font-size);
+  font-size: 12px;
 }
 </style>

lib/styles/variables.css

@@ -878,14 +878,3 @@
   --input-switch-disabled-toggle-color: var(--c-fg-gray-1);
   --input-switch-disabled-bg-color: var(--c-bg-mute-1);
 }
-
-/**
- * Component: Charts
- * -------------------------------------------------------------------------- */
-
-:root {
-  --chart-tick-font-size: 14px;
-  --chart-legend-font-size: 14px;
-  --chart-label-font-size: 14px;
-  --chart-tooltip-font-size: 12px;
-}

stories/components/SChart.01_Playground.story.vue

@@ -46,13 +46,16 @@ function state() {
     barMarginBottom: undefined,
     barMarginLeft: undefined,
     barTicks: undefined,
+    barTickFontSize: undefined,
     barMaxBandwidth: undefined,
     barAnimate: true,
     barTooltip: true,
     barXLabel: undefined,
     barYLabel: undefined,
     barXLabelOffset: undefined,
     barYLabelOffset: undefined,
+    barXLabelFontSize: undefined,
+    barYLabelFontSize: undefined,
 
     pieType: 'donut',
     pieHalf: false,
@@ -66,7 +69,9 @@ function state() {
     pieActiveKey: undefined,
     pieLegend: true,
     pieLegendPadding: undefined,
-    pieLabels: false
+    pieLegendFontSize: undefined,
+    pieLabels: false,
+    pieLabelFontSize: undefined
   }
 }
 </script>
@@ -114,6 +119,12 @@ function state() {
         :min="0"
         :max="20"
       />
+      <HstSlider
+        title="tick-font-size"
+        v-model="state.barTickFontSize"
+        :min="10"
+        :max="20"
+      />
       <HstSlider
         title="max-bandwidth"
         v-model="state.barMaxBandwidth"
@@ -148,6 +159,18 @@ function state() {
         :min="-10"
         :max="60"
       />
+      <HstSlider
+        title="x-label-font-size"
+        v-model="state.barXLabelFontSize"
+        :min="10"
+        :max="20"
+      />
+      <HstSlider
+        title="y-label-font-size"
+        v-model="state.barYLabelFontSize"
+        :min="10"
+        :max="20"
+      />
       <div class="s-p-8 s-font-14 s-font-w-500">Pie Chart</div>
       <HstSelect
         title="type"
@@ -212,10 +235,22 @@ function state() {
         :min="50"
         :max="150"
       />
+      <HstSlider
+        title="legend-font-size"
+        v-model="state.pieLegendFontSize"
+        :min="10"
+        :max="20"
+      />
       <HstCheckbox
         title="labels"
         v-model="state.pieLabels"
       />
+      <HstSlider
+        title="label-font-size"
+        v-model="state.pieLabelFontSize"
+        :min="10"
+        :max="20"
+      />
     </template>
     <template #default="{ state }">
       <Board :title="title">
@@ -251,13 +286,16 @@ function state() {
                 :type="state.barType"
                 :debug="state.barDebug"
                 :ticks="state.barTicks"
+                :tick-font-size="state.barTickFontSize"
                 :animate="state.barAnimate"
                 :tooltip="state.barTooltip"
                 :tooltip-format
                 :x-label="state.barXLabel"
                 :y-label="state.barYLabel"
                 :x-label-offset="state.barXLabelOffset"
                 :y-label-offset="state.barYLabelOffset"
+                :x-label-font-size="state.barXLabelFontSize"
+                :y-label-font-size="state.barYLabelFontSize"
                 :max-bandwidth="state.barMaxBandwidth"
               />
             </div>
@@ -302,8 +340,10 @@ function state() {
                 :active-key="state.pieActiveKey"
                 :legend="state.pieLegend"
                 :legend-padding="state.pieLegendPadding"
+                :legend-font-size="state.pieLegendFontSize"
                 :labels="state.pieLabels"
                 :label-format="labelFormat"
+                :label-font-size="state.pieLabelFontSize"
               />
             </div>
           </SCardBlock>