📝 Update bar-sparkline playground example

packages/lib/src/playground/bar-sparkline.stories.ts

@@ -7,31 +7,30 @@ export default {
     options: {
       control: 'object',
     },
+    barWidth: { control: { type: 'number' } },
+    gap: { control: { type: 'number' } },
+    height: { control: { type: 'number' } },
   },
   args: {
-    options: {
-      margins: { top: 0, right: 0, bottom: 0, left: 0 },
-      withAxes: false,
-      withHover: false,
-      withLegend: false,
-      noMinSize: true,
-    },
     data: [
       {
         values: [
           20,
           50,
           30,
-          35,
-          { value: 70, color: '09' },
+          60,
           { value: 80, color: '09' },
           { value: 75, color: '09' },
         ],
-        label: 'Emojis',
+        label: 'Abandoned pets',
         type: 'line',
+        color: 'green',
       },
     ],
-    labels: ['Cops', 'Frits!', 'Beer', '8 ball', 'Bear', 'Dogger', 'Barber'],
+    labels: [0, 1, 2, 3, 4, 5],
+    barWidth: 12,
+    gap: 2,
+    height: 20,
   },
 };
 
@@ -42,9 +41,9 @@ export const Basic = ({ args }) => {
       return { args };
     },
     template: `
-    <div style="width: 160px; height: 40px">
-      <bar-sparkline v-bind="args" />
-    </div>
+      <div :style="{ height: args.height + 'px' }">
+        <bar-sparkline v-bind="args" />
+      </div>
     `,
   };
 };

packages/lib/src/playground/bar-sparkline.vue

@@ -1,23 +1,97 @@
 <template>
-  <LumeBarChart v-bind="$props" />
+  <lume-chart
+    v-bind="$props"
+    :options="options"
+    :style="{ width: `${width}px` }"
+    class-list="bar-sparkline"
+  >
+    <template #groups="groupProps">
+      <lume-bar-group v-bind="groupProps" />
+
+      <g>
+        <rect
+          v-for="(_l, index) in groupProps.labels.length"
+          v-bind="getBarCapProps(index, groupProps)"
+          :key="`cap_${index}`"
+        />
+      </g>
+    </template>
+  </lume-chart>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed, toRefs } from 'vue';
 
-import LumeBarChart from '@/components/charts/lume-bar-chart';
+import LumeChart from '@/components/core/lume-chart';
+import LumeBarGroup from '@/components/groups/lume-bar-group';
 
 import { withChartProps } from '@/composables/props';
 
-export default defineComponent({
-  components: { LumeBarChart },
-  props: {
-    ...withChartProps(),
+import type { ChartOptions } from '@/types/options';
+
+const props = defineProps({
+  ...withChartProps(),
+  barWidth: {
+    type: Number,
+    required: true,
   },
-  setup() {
-    return {};
+  gap: {
+    type: Number,
+    required: true,
   },
 });
+
+const { barWidth, gap } = toRefs(props);
+
+const barCount = computed(() => props.data[0].values.length);
+const width = computed(
+  () => barCount.value * barWidth.value + (barCount.value - 1) * gap.value
+);
+
+const options = computed<ChartOptions>(() => ({
+  margins: { top: 0, right: 0, bottom: 0, left: 0 },
+  noMinSize: true,
+  paddingInner: gap.value / (barWidth.value + gap.value),
+  paddingOuter: 0,
+  startOnZero: true,
+  withAxes: false,
+  withLegend: false,
+}));
+
+function getBarCapProps(index: number, { data, xScale, yScale }) {
+  const values = data[0].values;
+  return {
+    width: barWidth.value,
+    height: 2,
+    x: xScale(index),
+    y: yScale(values[index].value),
+    class: [
+      'bar-sparkline__cap',
+      values[index].value > 70
+        ? 'bar-sparkline__cap--red'
+        : 'bar-sparkline__cap--green',
+    ],
+  };
+}
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+.bar-sparkline {
+  opacity: 0.3;
+
+  transition: opacity 0.1s ease-in-out !important;
+
+  &:hover {
+    opacity: 0.5;
+  }
+
+  &__cap {
+    &--green {
+      fill: var(--lume-color--green);
+    }
+    &--red {
+      fill: var(--lume-color--red);
+    }
+  }
+}
+</style>