update barchart

stories/barchart.stories.tsx

@@ -7,6 +7,18 @@ import {
   barchartData,
 } from './data/barchart';
 import { SyncedCursorCharts } from '../src/lib/components/vegachartv2/SyncedCursorCharts';
+
+import { Component } from '@storybook/blocks';
+import { minHeight } from 'styled-system';
+
+const width = 800;
+// the size control the size of each small item of the bar
+
+const barConfig = {
+  cornerRadius: 8,
+  size: 12,
+};
+
 // props for vertical stacked bar chart
 const idVerticalStacked = 'vis_vertical_stacked';
 const xAxisVerticalStacked = {
@@ -44,12 +56,8 @@ const colorVerticalStacked = {
     range: ['#4BE4E2', '#E45834', '#FEFA52', '#968BFF', '#BE2543', '#DC90F1'],
   },
 };
-const width = 800;
-// the size control the size of each small item of the bar
-const barConfig = {
-  cornerRadius: 8,
-  size: 12,
-};
+
+
 // props for horizontal stacked bar chart
 const idHorizontalStacked = 'vis_horizontal_stacked';
 const xAxisHorizontalStacked = {
@@ -65,6 +73,22 @@ const colorHorizontalStacked = {
   field: 'site',
   type: 'nominal',
 };
+
+// Recreating vertical bar chart props
+const verticalBarChartArgs = {
+  id: 'vis_vertical',
+  xAxis:{
+    field: 'a',
+    type: 'ordinal',
+  },
+  yAxis:{
+    field: 'b',
+    type: 'quantitative',
+  },
+  data:barchartData
+
+}
+
 // props for vertical bar chart
 const idVertical = 'vis_vertical';
 const xAxisVertical = {
@@ -75,6 +99,22 @@ const yAxisVertical = {
   field: 'b',
   type: 'quantitative',
 };
+
+//Recreating horizontal bar chart
+
+const horizontalBarChartArgs = {
+  id: 'vis_hotrizontal',
+  xAxis:{
+    field: 'b',
+    type: 'quantitative',
+  },
+  yAxis:{
+    field: 'a',
+    type: 'ordinal',
+  },
+  data:barchartData
+}
+
 // props for horizontal bar chart
 const idHorizontal = 'vis_horizontal';
 const xAxisHorizontal = {
@@ -85,10 +125,101 @@ const yAxisHorizontal = {
   field: 'a',
   type: 'ordinal',
 };
+
 export default {
   title: 'Components/Chart/BarChart',
   component: BarChart,
+  decorators:[(story:Component) => (
+    <Wrapper style={{minHeight:'30vh', padding:'3rem'}}>
+      <SyncedCursorCharts>
+        {story()}
+      </SyncedCursorCharts>
+    </Wrapper>) ],
+  argTypes:{
+    id :{control:false},
+    data:{control:false},
+    yAxis:{control:false},
+    xAxis:{control:false},
+    barConfig:{control:false},
+    color:{control:false},
+    height:{control:false},
+  }
 };
+
+export const verticalStackedChart = {
+  args:{
+    id:'vis_vertical_stacked',
+    xAxis:{
+      field: 'xlabel',
+      type: 'ordinal',
+      title: null,
+      axis: {
+        labelAngle: 0,
+      },
+      sort: {
+        order: 'ascending',
+      },
+    },
+    yAxis:{
+      aggregate: 'count',
+      field: '*',
+      title: null,
+      type: 'quantitative',
+      scale: {
+        padding: 1,
+      },
+    },
+    data:verticalStackedData,
+    barConfig:barConfig,
+    color: {
+      field: 'status',
+      type: 'nominal',
+      legend: {
+        direction: 'horizontal',
+        orient: 'top',
+        title: null,
+        symbolType: 'circle',
+        columnPadding: 50,
+      },
+      scale: {
+        domain: ['2XX', '401', '404', '4XX', '503', '5XX'],
+        range: ['#4BE4E2', '#E45834', '#FEFA52', '#968BFF', '#BE2543', '#DC90F1'],
+      },
+    },}
+}
+
+export const horizontalStackedchart = {
+  args:{
+    id:'vis_horizontal_stacked',
+    xAxis:{
+    aggregate: 'sum',
+    field: 'yield',
+    type: 'quantitative',
+    },
+    yAxis: {
+    field: 'variety',
+    type: 'nominal',
+    },
+    color:{
+    field: 'site',
+    type: 'nominal',
+    },
+    data:horizontalStackedData,}
+}
+
+export const verticalBarChart = {
+  args:{...verticalBarChartArgs}
+}
+
+export const horizontalBarChart = {
+  args: {...horizontalBarChartArgs}
+}
+/*
+export default {
+  title: 'Components/Chart/BarChart',
+  component: BarChart,
+};
+
 export const Default = {
   render: ({}) => {
     return (
@@ -129,4 +260,4 @@ export const Default = {
       </Wrapper>
     );
   },
-};
+}; */

stories/box.stories.tsx

@@ -5,6 +5,7 @@ import { Box } from '../src/lib/components/box/Box';
 const info = {
   title: 'Components/Box',
   component: Box,
+  decorators: [story => <HighlightBorder>{story()}</HighlightBorder>]
 };
 
 export default info;
@@ -21,7 +22,7 @@ const HighlightBorder = styled.div`
 export const margin = {
   render: ({}) => {
     return (
-      <HighlightBorder>
+      <>
         <Box m={0}>Props m 0 = 0</Box>
         <Box m={1}>Props m 1 = 0.071rem </Box>
         <Box m={2}>Props m 2 = 0.143rem </Box>
@@ -36,8 +37,10 @@ export const margin = {
         <Box m={11}>Props m 11 = 2rem</Box>
         <Box m={12}>Props m 12 = 2.286rem</Box>
         <Box m={13}>Props m 13 = 2.857rem</Box>
-        <Box m={14}>Props m 13 = 14px</Box>
-      </HighlightBorder>
+        <Box m={14}>Props m 14 = 14px</Box>
+      </>
+
+
     );
   },
 };