Merge pull request #53 from mattlangeman/bars-bar-component-refactoring

Bars bar component refactoring

src/lib/components/Bar.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import { getContext } from 'svelte';
+  import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+
+  import { createDimensionGetter } from '$lib/utils/rect';
+  import Rect from './Rect.svelte';
+
+  const {x: xContext, y: yContext, rGet, config } = getContext('LayerCake');
+
+  export let bar: Object;
+
+  /**
+   * Override `x` from context.  Useful for multiple Bar instances
+   */
+   export let x = $xContext;
+
+  /**
+   * Override `y` from context.  Useful for multiple Bar instances
+   */
+  export let y = $yContext;
+
+  export let fill: string | undefined = undefined;
+  export let stroke = 'black';
+  export let strokeWidth = 0;
+  export let radius = 0;
+
+  export let getProps: ((obj: { value: any; item: any; index: number }) => any) | undefined =
+    undefined;
+
+  export let padding = 0;
+  export let groupBy: string | undefined = undefined;
+  export let groupPaddingInner = 0.2;
+  export let groupPaddingOuter = 0;
+
+  export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
+  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
+
+  $: if (stroke === null || stroke === undefined) stroke = 'black';
+
+  $: getDimensions = createDimensionGetter(getContext('LayerCake'), {
+    x,
+    y,
+    groupBy,
+    padding,
+    groupPadding: {
+      inner: groupPaddingInner,
+      outer: groupPaddingOuter,
+    },
+  });
+</script>
+
+<Rect
+  {fill}
+  {spring}
+  {tweened}
+  {stroke}
+  stroke-width={strokeWidth}
+  rx={radius}
+  {...$getDimensions(bar)}
+  {...$$restProps}
+  on:click
+/>

src/lib/components/Bars.svelte

@@ -2,29 +2,23 @@
   import { getContext } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
 
-  import Rect from './Rect.svelte';
-  import { createDimensionGetter } from '$lib/utils/rect';
+  import Bar from './Bar.svelte';
 
-  const { data, xScale, x: xContext, y: yContext, rGet, config } = getContext('LayerCake');
+  const { data, rGet, config } = getContext('LayerCake');
 
   /**
    * Override `x` from context.  Useful for multiple Bar instances
    */
-  export let x = $xContext;
-  // Convert x to function
-  $: _x = x ? (typeof x === 'string' ? (d) => d[x] : x) : $xContext;
+  export let x: any = undefined; // TODO: Update Type
 
   /**
    * Override `y` from context.  Useful for multiple Bar instances
    */
-  export let y = $yContext;
-  $: _y = y ? (typeof y === 'string' ? (d) => d[y] : y) : $yContext;
+  export let y: any = undefined; // TODO: Update Type
 
   export let stroke = 'black';
   export let strokeWidth = 0;
   export let radius = 0;
-  export let getKey: (item: any, index: number) => any = (item) =>
-    $xScale.bandwidth ? _x(item) : _y(item);
   export let getProps: ((obj: { value: any; item: any; index: number }) => any) | undefined =
     undefined;
   /** Inset the rect for amount of padding.  Useful with multiple bars (bullet, overlap, etc) */
@@ -39,31 +33,27 @@
   export let groupPaddingInner = 0.2;
   export let groupPaddingOuter = 0;
 
-  $: getDimensions = createDimensionGetter(getContext('LayerCake'), {
-    x,
-    y,
-    groupBy,
-    padding,
-    groupPadding: {
-      inner: groupPaddingInner,
-      outer: groupPaddingOuter,
-    },
-  });
 </script>
 
 <g class="Bars">
-  {#each $data as item, index (getKey(item, index))}
-    <Rect
-      data-id={index}
-      fill={$config.r ? $rGet(item) : null}
-      {stroke}
-      stroke-width={strokeWidth}
-      rx={radius}
-      {spring}
-      {tweened}
-      {...$getDimensions(item)}
-      {...getProps?.({ value: _y(item), item, index })}
-      {...$$restProps}
-    />
-  {/each}
+  <slot name="bars">
+    {#each $data as item, index}
+      <Bar
+        bar={item}
+        {x}
+        {y}
+        fill={$config.r ? $rGet(item) : null}
+        {stroke}
+        {strokeWidth}
+        {radius}
+        {spring}
+        {tweened}
+        {groupBy}
+        {padding}
+        {groupPaddingInner}
+        {groupPaddingOuter}
+        {...$$restProps}
+      />
+    {/each}
+  </slot>
 </g>

src/lib/components/Highlight.svelte

@@ -6,6 +6,7 @@
   import { isScaleBand } from '$lib/utils/scales';
   import Circle from './Circle.svelte';
   import Line from './Line.svelte';
+  import Bar from './Bar.svelte';
   import Rect from './Rect.svelte';
   import { tooltipContext } from './TooltipContext.svelte';
 
@@ -37,6 +38,9 @@
   /** Show area and pass props to Rect */
   export let area: boolean | ComponentProps<Rect> = false;
 
+  /** Show bar and pass props to Rect */
+  export let bar: boolean | ComponentProps<Rect> = false;
+
   // TODO: Fix circle points being backwards for stack (see AreaStack)
 
   let _points = [];
@@ -198,6 +202,24 @@
     </slot>
   {/if}
 
+  {#if bar}
+    <slot name="bar" bar={bar}>
+      <Bar
+        spring
+        x={typeof bar === 'object' ? bar.x : null}
+        y={typeof bar === 'object' ? bar.y : null}
+        padding={typeof bar === 'object' ? bar.padding : null}
+        stroke={typeof bar === 'object' ? bar.stroke : null}
+        strokeWidth={typeof bar === 'object' ? bar.strokeWidth : null}
+        radius={typeof bar === 'object' ? bar.radius : null}
+        bar={$tooltip.data}
+        class={cls(!bar.fill && 'fill-accent-500', typeof bar === 'object' ? bar.class : null)}
+        on:click
+      />
+    </slot>
+  {/if}
+
+
   {#if lines}
     <slot name="lines" lines={_lines}>
       {#each _lines as line}

src/routes/_NavMenu.svelte

@@ -16,6 +16,7 @@
       'Line',
       'PunchCard',
       'Scatter',
+      'Sparkbar',
       'Sparkline',
       'Threshold',
     ],

src/routes/docs/components/Tooltip/+page.svelte

@@ -437,6 +437,7 @@
           points={charts.bars.highlight.includes('points')}
           lines={charts.bars.highlight.includes('lines')}
           area={charts.bars.highlight.includes('area')}
+          bar={charts.bars.highlight.includes('bar') ? {radius: 4, class: 'fill-accent-800'} : false}
           axis={charts.bars.axis}
         />
       </Svg>
@@ -482,8 +483,12 @@
           points={charts.multiBars.highlight.includes('points')}
           lines={charts.multiBars.highlight.includes('lines')}
           area={charts.multiBars.highlight.includes('area')}
+          bar={charts.multiBars.highlight.includes('bar') ? {y: "baseline", radius: 4, strokeWidth: 1, class: "fill-gray-400"} : false}
           axis={charts.multiBars.axis}
         />
+        <Highlight
+          bar={charts.multiBars.highlight.includes('bar') ? {y: "value", radius: 4, padding: 16, strokeWidth: 1, class: "fill-accent-800"} : false}
+        />
       </Svg>
       <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
         <TooltipItem label="value" value={data.value} />

src/routes/docs/components/Tooltip/TooltipControls.svelte

@@ -40,6 +40,7 @@
       { name: 'points', value: 'points' },
       { name: 'lines', value: 'lines' },
       { name: 'area', value: 'area' },
+      { name: 'bar', value: 'bar' },
     ]}
     formatSelected={({ options }) => options.map((x) => x.name).join(', ')}
   />

src/routes/docs/examples/Bars/+page.svelte

@@ -144,6 +144,34 @@
   </div>
 </Preview>
 
+<h2>with Tooltip and Bar Highlight</h2>
+
+<Preview>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      {data}
+      x="value"
+      xDomain={[0, null]}
+      xNice
+      y="date"
+      yScale={scaleBand().padding(0.4)}
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
+    >
+      <Svg>
+        <Axis placement="bottom" grid rule />
+        <Axis placement="left" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
+        <Bars radius={4} strokeWidth={1} class="fill-gray-300" />
+        <Highlight area bar={{class: "fill-accent-500", strokeWidth: 1, radius: 4}} />
+      </Svg>
+      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
+        <TooltipItem label="value" value={data.value} />
+      </Tooltip>
+    </Chart>
+  </div>
+</Preview>
+
+
 <h2>with Labels and negative data</h2>
 
 <Preview>

src/routes/docs/examples/Columns/+page.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { cls } from 'svelte-ux';
   import { cubicInOut } from 'svelte/easing';
   import { scaleBand, scaleOrdinal } from 'd3-scale';
   import { format } from 'date-fns';
@@ -144,6 +145,33 @@
   </div>
 </Preview>
 
+<h2>with Tooltip and Bar Highlight</h2>
+
+<Preview>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      {data}
+      x="date"
+      xScale={scaleBand().padding(0.4)}
+      y="value"
+      yDomain={[0, null]}
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis placement="bottom" format={(d) => formatDate(d, PeriodType.Day, 'short')} rule />
+        <Bars radius={4} strokeWidth={1} class="fill-gray-300" />
+        <Highlight area bar={{class: "fill-accent-500", strokeWidth: 1, radius: 4}} />
+      </Svg>
+      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
+        <TooltipItem label="value" value={data.value} />
+      </Tooltip>
+    </Chart>
+  </div>
+</Preview>
+
 <h2>with Labels and negative data</h2>
 
 <Preview>

src/routes/docs/examples/Columns/+page.ts

@@ -4,7 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
-      related: ['components/Bars', 'examples/Bars', 'examples/Histogram'],
+      related: ['components/Bars', 'examples/Bars', 'examples/Histogram', 'examples/Sparkbar'],
     },
   };
 }