add upsert chart. Bars can now be rendered in an inverse direction (e…

….g. right to left). Base now has title and description svg tags for accessibility

dist/types/Upsert.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

dist/types/UpsetChart.d.ts

@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import { TLabelComponent } from './components/Label';
+export declare type TUpsetData = {
+    keys: string[];
+    value: number;
+}[];
+interface IProps {
+    colorScheme?: string[];
+    data: TUpsetData;
+    height: number;
+    hoverColorScheme?: string[];
+    showLabels?: boolean[];
+    visible?: Record<string, boolean>;
+    width: number;
+    xAxisHeight?: number;
+    yAxisWidth?: number;
+    textFill?: string;
+    distribution?: {
+        colorScheme: string[];
+        fill: {
+            active: string;
+            inactive: string;
+        };
+        label?: string;
+    };
+    setSize?: {
+        dimensions: {
+            chartWidth: number;
+            axisWidth: number;
+            height: number;
+        };
+        label?: string;
+        colorScheme: string[];
+        LabelComponent?: TLabelComponent;
+    };
+    axisSpace?: number;
+    radius?: number;
+    /** @description accessible title */
+    title: string;
+    /** @description accessible description */
+    description: string;
+}
+declare const UpsetChart: FC<IProps>;
+export default UpsetChart;

dist/types/components/Bars/Bars.d.ts

@@ -4,7 +4,7 @@ import { EChartDirection } from '../../BarChart';
 import { EGroupedBarLayout, IBarChartDataSet, IGroupDataItem, IHistogramBar } from '../../Histogram';
 import { TLabelComponent } from '../Label';
 import { TTipFunc } from '../ToolTip';
-interface IProps {
+export interface IProps {
     bins: (string | [number, number])[];
     config?: SpringConfig;
     colorScheme?: readonly string[];
@@ -23,6 +23,7 @@ interface IProps {
     values: IBarChartDataSet[];
     visible?: Record<string, boolean>;
     width: number;
+    inverse?: boolean;
 }
 export declare type ExtendedGroupItem = IGroupDataItem & {
     datasetIndex: number;

dist/types/components/Bars/barHelper.d.ts

@@ -18,6 +18,8 @@ interface IBarSpringProps {
     paddings: IHistogramBar;
     config: SpringConfig;
     direction: EChartDirection;
+    /** @description - inverse the bars e.g if direction = horizontal run the bars from right to left */
+    inverse?: boolean;
 }
 /**
  * Build the from / to spring animation properties to animate the bars.
@@ -27,7 +29,7 @@ export declare const buildBarSprings: (props: IBarSpringProps) => ({
         width: number;
         fill: string;
         hoverFill: string;
-        x: number;
+        x: any;
         y: number;
         height: number;
     };

dist/types/components/Base.d.ts

@@ -3,6 +3,7 @@ interface IProps {
     width: number;
     height: number;
     padding?: number;
+    description?: string;
 }
 declare const Base: FC<IProps & HTMLAttributes<SVGElement>>;
 export default Base;

dist/types/components/YAxis.d.ts

@@ -24,6 +24,8 @@ export interface IAxis {
     left?: number;
     padding?: IHistogramBar;
     labelFormat?: TAxisLabelFormat;
+    /** @description make the axis ticks display in the opposite direction */
+    inverse?: boolean;
     tickFormat?: {
         stroke: string;
         fontSize?: string;

docs-src/public/page-data/chord/page-data.json

@@ -0,0 +1 @@
+{"componentChunkName":"component---src-pages-chord-tsx","path":"/chord/","result":{"pageContext":{}},"staticQueryHashes":["3649515864","63159454"]}

docs-src/public/page-data/dev-404-page/page-data.json

@@ -0,0 +1 @@
+{"componentChunkName":"component---cache-dev-404-page-js","path":"/dev-404-page/","result":{"data":{"allSitePage":{"nodes":[{"path":"/404/"},{"path":"/brush/"},{"path":"/chord/"},{"path":"/histogram/"},{"path":"/"},{"path":"/joyplot/"},{"path":"/line/"},{"path":"/map/"},{"path":"/pie/"},{"path":"/tornado/"},{"path":"/upset/"},{"path":"/404.html"}]}},"pageContext":{}},"staticQueryHashes":[]}

docs-src/public/page-data/upset/page-data.json

@@ -0,0 +1 @@
+{"componentChunkName":"component---src-pages-upset-tsx","path":"/upset/","result":{"pageContext":{}},"staticQueryHashes":["3649515864","63159454"]}

docs-src/src/components/header.tsx

@@ -23,6 +23,7 @@ const Header = ({ siteTitle }) => (
       <Button><Link to="/joyplot">Joy Plot</Link></Button>
       <Button><Link to="/brush">Brush</Link></Button>
       <Button><Link to="/chord">Chord</Link></Button>
+      <Button><Link to="/upset">Upset</Link></Button>
 
       {/* <Button><Link to="/map">Map</Link></Button> */}
     </Toolbar>

docs-src/src/pages/index.tsx

@@ -16,6 +16,7 @@ const IndexPage = () => (
       <li><Link to="/brush">Brush</Link></li>
       <li><Link to="/chord">Chord</Link></li>
       <li><Link to="/map">Map</Link></li>
+      <li><Link to="/upset">Upset</Link></li>
     </ul>
   </Layout>
 );

docs-src/src/pages/upset.tsx

@@ -0,0 +1,62 @@
+// Be sure to include styles at some point, probably during your bootstrapping
+import 'react-datasheet/lib/react-datasheet.css';
+
+import React, { FC } from 'react';
+
+import {
+  Card,
+  CardContent,
+  Grid,
+  Typography,
+} from '@material-ui/core';
+
+import UpsetChart, { TUpsetData } from '../../../src/UpsetChart';
+import Layout from '../components/layout';
+import SEO from '../components/seo';
+
+const data: TUpsetData = [
+  { keys: ['Another label'], value: 10 },
+  { keys: ['Another label', 'B'], value: 14 },
+  { keys: ['Another label', 'B', 'C'], value: 1 },
+  { keys: ['B'], value: 10 },
+  { keys: ['Another label', 'C'], value: 14 },
+  { keys: ['C'], value: 12 },
+];
+
+const UpsetExample: FC = () => {
+  return (
+    <Layout>
+      <SEO title="Line Chart" description="" />
+      <Typography variant="h2">Upset</Typography>
+      <div>
+        <Grid container spacing={10}>
+          <Grid item xs={6}>
+            <Card>
+              <CardContent>
+                <UpsetChart
+                  title="example upset chart"
+                  description="more info for accessibility"
+                  width={600}
+                  height={400}
+                  distribution={{
+                    colorScheme: ['rgb(154, 187, 218)'],
+                    fill: {
+                      active: 'rgb(154, 187, 218)',
+                      inactive: '#ddd',
+                    },
+                  }}
+                  setSize={{
+                    dimensions: { chartWidth: 100, axisWidth: 120, height: 150 },
+                    colorScheme: ['rgb(154, 218, 172)'],
+                  }}
+                  data={data} />
+              </CardContent>
+            </Card>
+          </Grid>
+        </Grid>
+      </div>
+    </Layout>
+  );
+};
+
+export default UpsetExample;