Merge pull request #2196 from evidence-dev/bubbleChartStories

Bubble chart stories

.changeset/khaki-spies-sparkle.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+added bubblechart stories

packages/ui/core-components/sources/faker-demo-source/connection.yaml

@@ -3,4 +3,4 @@
 name: series_demo_source
 type: faker
 options:
-  seed: evidence-series-demo
+  seed: evidence-series-demo

packages/ui/core-components/sources/faker-demo-source/flights.yaml

@@ -4,27 +4,27 @@ schema:
     type: id
   plane:
     category: airline
-    item: airplane 
+    item: airplane
     targetField: name
   airline:
     category: airline
-    item: airline 
+    item: airline
     targetField: name
-  fare: 
+  fare:
     category: number
-    item: float 
+    item: float
     options:
       - max: 10000
         min: 75
         fractionDigits: 21
-  departure_airport: 
+  departure_airport:
     category: airline
-    item: airport 
-    targetField: name 
-  arrival_airport: 
+    item: airport
+    targetField: name
+  arrival_airport:
     category: airline
-    item: airport 
-    targetField: name 
+    item: airport
+    targetField: name
   seat:
     category: airline
     item: seat
@@ -33,6 +33,6 @@ schema:
     item: recent
     options:
       - days: 365
-  regulator: 
-    category: location 
-    item: country 
+  regulator:
+    category: location
+    item: country

packages/ui/core-components/sources/faker-demo-source/hashtags.yaml

@@ -7,27 +7,27 @@ schema:
       - category: helpers
         item: fake
         options:
-          - "#{{company.buzzAdjective}}"
+          - '#{{company.buzzAdjective}}'
       - category: helpers
         item: fake
         options:
-          - "#{{company.buzzNoun}}"
+          - '#{{company.buzzNoun}}'
       - category: helpers
         item: fake
         options:
-          - "#{{company.catchPhraseAdjective}}"
+          - '#{{company.catchPhraseAdjective}}'
       - category: helpers
         item: fake
         options:
-          - "#{{company.catchPhraseNoun}}"
+          - '#{{company.catchPhraseNoun}}'
       - category: helpers
         item: fake
         options:
-          - "#{{person.jobDescriptor}}{{company.catchPhraseNoun}}"
+          - '#{{person.jobDescriptor}}{{company.catchPhraseNoun}}'
       - category: helpers
         item: fake
         options:
-          - "#{{hacker.ingverb}}{{hacker.noun}}"
+          - '#{{hacker.ingverb}}{{hacker.noun}}'
 filters:
   - type: unique
     fields:

packages/ui/core-components/sources/faker-demo-source/la_locations.yaml

@@ -16,10 +16,10 @@ schema:
     item: longitude
     options:
       - min: -118.9448
-        max: -117.6464 
+        max: -117.6464
   sales:
     category: number
     item: int
     options:
       - min: 1000
-        max: 234593
+        max: 234593

packages/ui/core-components/sources/faker-demo-source/la_zip_sales.yaml

@@ -13,4 +13,4 @@ schema:
     item: int
     options:
       - min: 1000
-        max: 234593
+        max: 234593

packages/ui/core-components/sources/faker-demo-source/locations.yaml

@@ -16,10 +16,10 @@ schema:
     item: longitude
     options:
       - min: -90.4175
-        max: -82.1221  
+        max: -82.1221
   sales:
     category: number
     item: int
     options:
       - min: 1000
-        max: 234593
+        max: 234593

packages/ui/core-components/sources/faker-demo-source/state_sales.yaml

@@ -10,4 +10,4 @@ schema:
     item: int
     options:
       - min: 1000
-        max: 234593
+        max: 234593

packages/ui/core-components/src/lib/unsorted/viz/bubble/BubbleChart.stories.svelte

@@ -0,0 +1,167 @@
+<script context="module">
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'Charts/BubbleChart',
+		component: BubbleChart,
+		argTypes: {
+			series: {
+				control: 'string'
+			},
+			sort: {
+				control: 'boolean'
+			},
+			tooltipTitle: {
+				control: 'text'
+			},
+			emptySet: {
+				control: 'select',
+				options: ['pass', 'warn', 'error']
+			},
+			emptyMessage: {
+				control: 'text'
+			},
+			xFmt: {
+				control: 'text'
+			},
+			yFmt: {
+				control: 'text'
+			},
+			sizeFmt: {
+				control: 'text'
+			},
+			shape: {
+				control: 'select',
+				options: ['circle', 'emptyCircle', 'rect', 'triangle', 'diamond']
+			},
+			scaleTo: {
+				control: 'number'
+			},
+			opacity: {
+				control: 'number'
+			},
+			fillColor: {
+				control: 'color'
+			},
+			outlineWidth: {
+				control: 'number'
+			},
+			outlineColor: {
+				control: 'color'
+			},
+			colorPalette: {
+				control: 'array'
+			},
+			seriesColors: {
+				control: 'object'
+			},
+			yLog: {
+				control: 'boolean'
+			},
+			yLogBase: {
+				control: 'number'
+			},
+			xAxisTitle: {
+				control: 'text'
+			},
+			yAxisTitle: {
+				control: 'text'
+			},
+			xGridlines: {
+				control: 'boolean'
+			},
+			yGridlines: {
+				control: 'boolean'
+			},
+			xAxisLabels: {
+				control: 'boolean'
+			},
+			yAxisLabels: {
+				control: 'boolean'
+			},
+			xBaseline: {
+				control: 'boolean'
+			},
+			yBaseline: {
+				control: 'boolean'
+			},
+			xTickMarks: {
+				control: 'boolean'
+			},
+			yTickMarks: {
+				control: 'boolean'
+			},
+			yMin: {
+				control: 'number'
+			},
+			yMax: {
+				control: 'number'
+			},
+			title: {
+				control: 'text'
+			},
+			subtitle: {
+				control: 'text'
+			},
+			legend: {
+				control: 'boolean'
+			},
+			chartAreaHeight: {
+				control: 'number'
+			},
+			renderer: {
+				control: 'select',
+				options: ['canvas', 'svg']
+			},
+			echartsOptions: {
+				control: 'object'
+			},
+			seriesOptions: {
+				control: 'object'
+			},
+			printEchartsConfig: {
+				control: 'boolean'
+			}
+		}
+	};
+
+	const data = Query.create(
+		'SELECT plane, fare, SUM(fare) as total_sales, SUM(fare) as total_fare FROM flights WHERE plane IN (SELECT DISTINCT plane FROM flights LIMIT 2) GROUP BY plane, fare LIMIT 25',
+		query
+	);
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+	import { Query } from '@evidence-dev/sdk/usql';
+	import { query } from '@evidence-dev/universal-sql/client-duckdb';
+	import BubbleChart from './BubbleChart.svelte';
+</script>
+
+<Story name="Base" args={{ x: 'fare', y: 'total_fare', size: 'total_sales' }} let:args>
+	<BubbleChart {data} {...args} />
+</Story>
+
+<Story
+	name="Series"
+	args={{ series: 'plane', x: 'fare', y: 'total_fare', size: 'total_sales' }}
+	let:args
+>
+	<BubbleChart {data} {...args} />
+</Story>
+<Story name="Sort" args={{ sort: false, x: 'fare', y: 'total_fare', size: 'total_sales' }} let:args>
+	<BubbleChart {data} {...args} />
+</Story>
+<Story
+	name="Empty Set"
+	args={{
+		emptySet: 'warn',
+		emptyMessage: 'data set is empty',
+		x: 'fare',
+		y: 'total_fare',
+		size: 'total_sales'
+	}}
+	let:args
+>
+	{@const emptyData = []}
+	<BubbleChart data={emptyData} {...args} />
+</Story>