layerchart 0.52.1 → 0.54.0

package/dist/docs/Preview.svelte

@@ -5,6 +5,8 @@ import 'prism-svelte';
 import { mdiCodeTags, mdiTable } from '@mdi/js';
 import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
 import { cls } from '@layerstack/tailwind';
+import { entries, fromEntries } from '@layerstack/utils';
+import { isLiteralObject } from '@layerstack/utils/object';
 import Code from './Code.svelte';
 import Json from './Json.svelte';
 export let code = undefined;
@@ -12,13 +14,26 @@ export let data = undefined;
 export let language = 'svelte';
 export let highlightedCode = code ? Prism.highlight(code, Prism.languages.svelte, language) : '';
 export let showCode = false;
-let copyValue = null;
-try {
-    // TODO: Improve handling of circular structures
-    copyValue = JSON.stringify(data, null, 2);
+/**
+ * Custom JSON replacer (to use with JSON.stringify()) to convert `Date` instances to `new Date()`
+ */
+function replacer(key, value) {
+    // TODO: Improve handling of circular structures and handle other data types (Map, Set, etc)
+    if (this[key] instanceof Date) {
+        return `new Date('${this[key].toISOString()}')`;
+    }
+    return value;
 }
-catch (e) {
-    console.error('Error capturing value to copy', e);
+function getDataAsString(_data) {
+    try {
+        // Regular expression to match quoted instantiation (ex. `"new Date(...)"`) and stripe the quotes  (`new Date(...)`)
+        const datePattern = /"(new \w+\([^)]*\))"/g;
+        return JSON.stringify(_data, replacer, 2).replace(datePattern, '$1');
+    }
+    catch (e) {
+        console.error('Error capturing value to copy', e);
+        return '';
+    }
 }
 </script>
 
@@ -58,11 +73,9 @@ catch (e) {
           <div class="text-lg font-semibold">Chart data</div>
         </div>
 
-        {#if copyValue}
-          <Tooltip title="Copy">
-            <CopyButton value={copyValue} variant="fill-light" color="primary" />
-          </Tooltip>
-        {/if}
+        <Tooltip title="Copy">
+          <CopyButton value={() => getDataAsString(data)} variant="fill-light" color="primary" />
+        </Tooltip>
       </div>
 
       <Json value={data} />

package/dist/utils/genData.d.ts

@@ -48,7 +48,7 @@ export declare const wideData: {
     apples: number;
     bananas: number;
     cherries: number;
-    dates: number;
+    grapes: number;
 }[];
 export declare const longData: {
     year: number;

package/dist/utils/genData.js

@@ -86,28 +86,28 @@ export function createTimeSeries(options) {
     return timeSeries;
 }
 export const wideData = [
-    { year: 2019, apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
-    { year: 2018, apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
-    { year: 2017, apples: 820, bananas: 1000, cherries: 640, dates: 400 },
-    { year: 2016, apples: 820, bananas: 560, cherries: 720, dates: 400 },
+    { year: 2019, apples: 3840, bananas: 1920, cherries: 960, grapes: 400 },
+    { year: 2018, apples: 1600, bananas: 1440, cherries: 960, grapes: 400 },
+    { year: 2017, apples: 820, bananas: 1000, cherries: 640, grapes: 400 },
+    { year: 2016, apples: 820, bananas: 560, cherries: 720, grapes: 400 },
 ];
 export const longData = [
     { year: 2019, basket: 1, fruit: 'apples', value: 3840 },
     { year: 2019, basket: 1, fruit: 'bananas', value: 1920 },
     { year: 2019, basket: 2, fruit: 'cherries', value: 960 },
-    { year: 2019, basket: 2, fruit: 'dates', value: 400 },
+    { year: 2019, basket: 2, fruit: 'grapes', value: 400 },
     { year: 2018, basket: 1, fruit: 'apples', value: 1600 },
     { year: 2018, basket: 1, fruit: 'bananas', value: 1440 },
     { year: 2018, basket: 2, fruit: 'cherries', value: 960 },
-    { year: 2018, basket: 2, fruit: 'dates', value: 400 },
+    { year: 2018, basket: 2, fruit: 'grapes', value: 400 },
     { year: 2017, basket: 1, fruit: 'apples', value: 820 },
     { year: 2017, basket: 1, fruit: 'bananas', value: 1000 },
     { year: 2017, basket: 2, fruit: 'cherries', value: 640 },
-    { year: 2017, basket: 2, fruit: 'dates', value: 400 },
+    { year: 2017, basket: 2, fruit: 'grapes', value: 400 },
     { year: 2016, basket: 1, fruit: 'apples', value: 820 },
     { year: 2016, basket: 1, fruit: 'bananas', value: 560 },
     { year: 2016, basket: 2, fruit: 'cherries', value: 720 },
-    { year: 2016, basket: 2, fruit: 'dates', value: 400 },
+    { year: 2016, basket: 2, fruit: 'grapes', value: 400 },
 ];
 export function getPhyllotaxis({ radius, count, width, height, }) {
     // Phyllotaxis: https://www.youtube.com/watch?v=KWoJgHFYWxY

package/dist/utils/scales.d.ts

@@ -32,7 +32,7 @@ export declare function isScaleBand(scale: AnyScale<any, any>): scale is ScaleBa
  */
 export declare function scaleInvert(scale: AnyScale<any, any>, value: number): any;
 /** Create new copy of scale with domain and range */
-export declare function createScale(scale: AnyScale, domain: DomainType, range: any[] | Function, context?: Record<any, any>): AnyScale<any, any, any, any>;
+export declare function createScale(scale: AnyScale, domain: DomainType, range: any[] | readonly any[] | Function, context?: Record<any, any>): AnyScale<any, any, any, any>;
 /** Create a `scaleBand()` within another scaleBand()'s bandwidth (typically a x1 of an x0 scale, used for grouping) */
 export declare function groupScaleBand<Domain extends {
     toString(): string;

package/dist/utils/stack.test.js

@@ -5,19 +5,19 @@ export const testData = [
     { year: 2019, basket: 1, fruit: 'apples', value: 3840 },
     { year: 2019, basket: 1, fruit: 'bananas', value: 1920 },
     { year: 2019, basket: 2, fruit: 'cherries', value: 960 },
-    { year: 2019, basket: 2, fruit: 'dates', value: 400 },
+    { year: 2019, basket: 2, fruit: 'grapes', value: 400 },
     { year: 2018, basket: 1, fruit: 'apples', value: 1600 },
     { year: 2018, basket: 1, fruit: 'bananas', value: 1440 },
     { year: 2018, basket: 2, fruit: 'cherries', value: 960 },
-    { year: 2018, basket: 2, fruit: 'dates', value: 400 },
+    { year: 2018, basket: 2, fruit: 'grapes', value: 400 },
     { year: 2017, basket: 1, fruit: 'apples', value: 820 },
     { year: 2017, basket: 1, fruit: 'bananas', value: 1000 },
     { year: 2017, basket: 2, fruit: 'cherries', value: 640 },
-    { year: 2017, basket: 2, fruit: 'dates', value: 400 },
+    { year: 2017, basket: 2, fruit: 'grapes', value: 400 },
     { year: 2016, basket: 1, fruit: 'apples', value: 820 },
     { year: 2016, basket: 1, fruit: 'bananas', value: 560 },
     { year: 2016, basket: 2, fruit: 'cherries', value: 720 },
-    { year: 2016, basket: 2, fruit: 'dates', value: 400 },
+    { year: 2016, basket: 2, fruit: 'grapes', value: 400 },
 ];
 const testDataByYear = group(testData, (d) => d.year);
 describe('groupStackData', () => {

package/package.json

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