layerchart 0.35.0 → 0.36.1

package/dist/components/GeoPath.svelte

@@ -30,9 +30,16 @@ const { width, height } = getContext('LayerCake');
 const canvas = getContext('canvas');
 const geo = geoContext();
 $: geoPath = geoCurvePath($geo, curve);
+const DEFAULT_FILL = 'rgb(0, 0, 0)';
 $: renderContext = canvas ? 'canvas' : 'svg';
 $: ctx = canvas?.ctx;
 $: if (renderContext === 'canvas' && $ctx) {
+    let computedStyles = {};
+    // Transfer classes defined on <GeoPath> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
+    if ($$props.class) {
+        $ctx.canvas.classList.add(...$$props.class.split(' '));
+        computedStyles = window.getComputedStyle($ctx.canvas);
+    }
     // console.count('render');
     scaleCanvas($ctx, $width, $height);
     $ctx.clearRect(0, 0, $width, $height);
@@ -45,10 +52,13 @@ $: if (renderContext === 'canvas' && $ctx) {
         // Set the context here since setting it in `$: geoPath` is a circular reference
         geoPath = geoCurvePath($geo, curve, $ctx);
         geoPath(geojson);
-        $ctx.fillStyle = fill || 'transparent';
+        $ctx.fillStyle =
+            fill ??
+                (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
+                'transparent';
         $ctx.fill();
         $ctx.lineWidth = strokeWidth;
-        $ctx.strokeStyle = stroke;
+        $ctx.strokeStyle = stroke ?? computedStyles.stroke;
         $ctx.stroke();
     }
 }

package/dist/components/GeoPoint.svelte

@@ -15,9 +15,12 @@ $: [x, y] = $geo([long, lat]) ?? [0, 0];
 $: renderContext = canvas ? 'canvas' : 'svg';
 $: ctx = canvas?.ctx;
 $: if (renderContext === 'canvas' && $ctx) {
-    // console.count('render');
     scaleCanvas($ctx, $width, $height);
     $ctx.clearRect(0, 0, $width, $height);
+    // Transfer classes defined on <GeoPoint> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
+    if ($$props.class) {
+        $ctx.canvas.classList.add(...$$props.class.split(' '));
+    }
     render($ctx, { x, y });
 }
 </script>

package/dist/components/Highlight.svelte

@@ -9,6 +9,8 @@ import Rect from './Rect.svelte';
 import { tooltipContext } from './TooltipContext.svelte';
 const { flatData, x, xDomain, xScale, xRange, xGet, y, yDomain, yScale, yRange, yGet, rGet, config, } = getContext('LayerCake');
 const tooltip = tooltipContext();
+/** Highlight specific data (annotate), espect uses tooltip data */
+export let data = undefined;
 export let axis = undefined;
 /** Show points and pass props to Circles */
 export let points = false;
@@ -27,10 +29,11 @@ let _area = {
     width: 0,
     height: 0,
 };
-$: if ($tooltip.data) {
-    let xCoord = $xGet($tooltip.data);
+$: highlightData = data ?? $tooltip.data;
+$: if (highlightData) {
+    let xCoord = $xGet(highlightData);
     let xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
-    let yCoord = $yGet($tooltip.data);
+    let yCoord = $yGet(highlightData);
     let yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
     // Reset lines
     _lines = [];
@@ -73,7 +76,7 @@ $: if ($tooltip.data) {
         }
         else {
             // Find width to next data point
-            const index = $flatData.findIndex((d) => Number($x(d)) === Number($x($tooltip.data)));
+            const index = $flatData.findIndex((d) => Number($x(d)) === Number($x(highlightData)));
             const isLastPoint = index + 1 === $flatData.length;
             const nextDataPoint = isLastPoint ? max($xDomain) : $x($flatData[index + 1]);
             _area.width = ($xScale(nextDataPoint) ?? 0) - (xCoord ?? 0);
@@ -121,7 +124,7 @@ $: if ($tooltip.data) {
         }
         else {
             // Find width to next data point
-            const index = $flatData.findIndex((d) => Number($x(d)) === Number($x($tooltip.data)));
+            const index = $flatData.findIndex((d) => Number($x(d)) === Number($x(highlightData)));
             const isLastPoint = index + 1 === $flatData.length;
             const nextDataPoint = isLastPoint ? max($yDomain) : $x($flatData[index + 1]);
             _area.height = ($yScale(nextDataPoint) ?? 0) - (yCoord ?? 0);
@@ -139,12 +142,12 @@ $: if ($tooltip.data) {
         // `x` accessor with multiple properties (ex. `x={['start', 'end']})`)
         _points = xCoord.filter(notNull).map((xItem, i) => ({
             x: xItem + xOffset,
-            y: $yGet($tooltip.data) + yOffset,
+            y: $yGet(highlightData) + yOffset,
         }));
     }
-    else if (Array.isArray($tooltip.data)) {
+    else if (Array.isArray(highlightData)) {
         // Stack series
-        _points = $tooltip.data.map((yValue, i) => ({
+        _points = highlightData.map((yValue, i) => ({
             x: xCoord + xOffset,
             y: $yScale(yValue) + yOffset,
         }));
@@ -153,14 +156,14 @@ $: if ($tooltip.data) {
         _points = [
             {
                 x: xCoord + xOffset,
-                y: $yGet($tooltip.data) + yOffset,
+                y: $yGet(highlightData) + yOffset,
             },
         ];
     }
 }
 </script>
 
-{#if $tooltip.data}
+{#if highlightData}
   {#if area}
     <slot name="area" area={_area}>
       <Rect
@@ -186,7 +189,7 @@ $: if ($tooltip.data) {
         stroke={typeof bar === 'object' ? bar.stroke : null}
         strokeWidth={typeof bar === 'object' ? bar.strokeWidth : null}
         radius={typeof bar === 'object' ? bar.radius : null}
-        bar={$tooltip.data}
+        bar={highlightData}
         class={cls(!bar.fill && 'fill-primary', typeof bar === 'object' ? bar.class : null)}
         on:click
       />
@@ -216,7 +219,7 @@ $: if ($tooltip.data) {
     <slot name="points" points={_points}>
       {#each _points as point}
         <!-- TODO: Improve color with stacked data -->
-        {@const fill = $config.r ? $rGet($tooltip.data) : null}
+        {@const fill = $config.r ? $rGet(highlightData) : null}
         <Circle
           spring
           cx={point.x}

package/dist/components/Highlight.svelte.d.ts

@@ -1,6 +1,7 @@
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        /** Highlight specific data (annotate), espect uses tooltip data */ data?: any;
         axis?: 'x' | 'y' | 'both' | 'none' | undefined;
         /** Show points and pass props to Circles */ points?: boolean | Partial<{
             [x: string]: any;

package/package.json

@@ -4,7 +4,7 @@
   "author": "Sean Lynch <techniq35@gmail.com>",
   "license": "MIT",
   "repository": "techniq/layerchart",
-  "version": "0.35.0",
+  "version": "0.36.1",
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "@mdi/js": "^7.4.47",