@react-magma/charts 0.0.0-9de073 → 0.0.0-next.0

package/src/components/LineChart/magma-charts.ts

@@ -0,0 +1,279 @@
+// *
+// * Colors
+// *
+// const yellow200 = '#FFF59D';
+// const deepOrange600 = '#F4511E';
+// const lime300 = '#DCE775';
+// const lightGreen500 = '#8BC34A';
+// const teal700 = '#00796B';
+// const cyan900 = '#006064';
+
+// const colors = [
+//   '#0085CC',
+//   '#E0004D',
+//   '#FA6600',
+//   '#48A200',
+//   '#B12FAD',
+//   '#00A393',
+// ];
+
+const colors = [
+  '#00507A',
+  '#8F0033',
+  '#B84900',
+  '#255200',
+  '#711E6E',
+  '#005249',
+];
+
+const blueGrey50 = '#DFDFDF';
+const blueGrey300 = '#8F8F8F';
+const blueGrey700 = '#3F3F3F';
+const grey900 = 'pink';
+
+// *
+// * Typography
+// *
+const sansSerif = '"Open Sans",Helvetica,sans-serif';
+const letterSpacing = 'normal';
+const fontSize = 12;
+
+// *
+// * Layout
+// *
+const padding = 8;
+const baseProps = {
+  width: 350,
+  height: 350,
+  padding: 50,
+};
+
+// *
+// * Labels
+// *
+const baseLabelStyles = {
+  fontFamily: sansSerif,
+  fontSize,
+  letterSpacing,
+  padding,
+  fill: blueGrey700,
+  stroke: 'transparent',
+  strokeWidth: 0,
+};
+
+const centeredLabelStyles = { textAnchor: 'middle', ...baseLabelStyles };
+// *
+// * Strokes
+// *
+// const strokeDasharray = '10, 5';
+const strokeLinecap = 'round';
+const strokeLinejoin = 'round';
+
+export const magmaTheme: any = {
+  area: {
+    style: {
+      data: {
+        fill: grey900,
+      },
+      labels: baseLabelStyles,
+    },
+    ...baseProps,
+  },
+  axis: {
+    style: {
+      axis: {
+        fill: 'transparent',
+        stroke: blueGrey300,
+        strokeWidth: 1,
+        strokeLinecap,
+        strokeLinejoin,
+      },
+      axisLabel: {
+        ...centeredLabelStyles,
+        padding,
+        stroke: 'transparent',
+      },
+      grid: {
+        fill: 'none',
+        stroke: '#dfdfdf',
+        //strokeDasharray,
+        strokeLinecap,
+        strokeLinejoin,
+        pointerEvents: 'painted',
+      },
+      ticks: {
+        fill: 'transparent',
+        size: 0,
+        stroke: blueGrey300,
+        strokeWidth: 0,
+        strokeLinecap,
+        strokeLinejoin,
+      },
+      tickLabels: {
+        ...baseLabelStyles,
+        fill: blueGrey700,
+      },
+    },
+    ...baseProps,
+  },
+  polarDependentAxis: {
+    style: {
+      ticks: {
+        fill: 'transparent',
+        size: 1,
+        stroke: 'transparent',
+      },
+    },
+  },
+  bar: {
+    style: {
+      data: {
+        fill: blueGrey700,
+        padding,
+        strokeWidth: 0,
+      },
+      labels: baseLabelStyles,
+    },
+    ...baseProps,
+  },
+  boxplot: {
+    style: {
+      max: { padding, stroke: blueGrey700, strokeWidth: 1 },
+      maxLabels: { ...baseLabelStyles, padding: 3 },
+      median: { padding, stroke: blueGrey700, strokeWidth: 1 },
+      medianLabels: { ...baseLabelStyles, padding: 3 },
+      min: { padding, stroke: blueGrey700, strokeWidth: 1 },
+      minLabels: { ...baseLabelStyles, padding: 3 },
+      q1: { padding, fill: blueGrey700 },
+      q1Labels: { ...baseLabelStyles, padding: 3 },
+      q3: { padding, fill: blueGrey700 },
+      q3Labels: { ...baseLabelStyles, padding: 3 },
+    },
+    boxWidth: 20,
+    ...baseProps,
+  },
+  candlestick: {
+    style: {
+      data: {
+        stroke: blueGrey700,
+      },
+      labels: { ...baseLabelStyles, padding: 5 },
+    },
+    candleColors: {
+      positive: '#ffffff',
+      negative: blueGrey700,
+    },
+    ...baseProps,
+  },
+  chart: baseProps,
+  errorbar: {
+    borderWidth: 8,
+    style: {
+      data: {
+        fill: 'transparent',
+        opacity: 1,
+        stroke: blueGrey700,
+        strokeWidth: 2,
+      },
+      labels: baseLabelStyles,
+    },
+    ...baseProps,
+  },
+  group: {
+    colorScale: colors,
+    ...baseProps,
+  },
+  histogram: {
+    style: {
+      data: {
+        fill: blueGrey700,
+        stroke: grey900,
+        strokeWidth: 2,
+      },
+      labels: baseLabelStyles,
+    },
+    ...baseProps,
+  },
+  legend: {
+    colorScale: colors,
+    gutter: 10,
+    orientation: 'vertical',
+    titleOrientation: 'top',
+    style: {
+      data: {
+        type: 'circle',
+      },
+      labels: baseLabelStyles,
+      title: { ...baseLabelStyles, padding: 5 },
+    },
+  },
+  line: {
+    style: {
+      data: {
+        fill: 'transparent',
+        opacity: 1,
+        stroke: blueGrey700,
+        strokeWidth: 2,
+      },
+      labels: baseLabelStyles,
+    },
+    ...baseProps,
+  },
+  pie: {
+    colorScale: colors,
+    style: {
+      data: {
+        padding,
+        stroke: blueGrey50,
+        strokeWidth: 1,
+      },
+      labels: { ...baseLabelStyles, padding: 20 },
+    },
+    ...baseProps,
+  },
+  scatter: {
+    style: {
+      data: {
+        fill: blueGrey700,
+        opacity: 1,
+        stroke: 'transparent',
+        strokeWidth: 0,
+      },
+      labels: baseLabelStyles,
+    },
+    ...baseProps,
+  },
+  stack: {
+    colorScale: colors,
+    ...baseProps,
+  },
+  tooltip: {
+    style: { ...baseLabelStyles, padding: 0, pointerEvents: 'none' },
+    flyoutStyle: {
+      stroke: grey900,
+      strokeWidth: 1,
+      fill: '#f0f0f0',
+      pointerEvents: 'none',
+    },
+    flyoutPadding: 5,
+    cornerRadius: 5,
+    pointerLength: 10,
+  },
+  voronoi: {
+    style: {
+      data: {
+        fill: 'transparent',
+        stroke: 'transparent',
+        strokeWidth: 0,
+      },
+      labels: { ...baseLabelStyles, padding: 5, pointerEvents: 'none' },
+      flyout: {
+        stroke: grey900,
+        strokeWidth: 1,
+        fill: '#f0f0f0',
+        pointerEvents: 'none',
+      },
+    },
+    ...baseProps,
+  },
+};

package/src/index.ts

@@ -1,2 +1 @@
 export * from './components/LineChart';
-export * from './components/DataViz';

package/dist/components/DataViz/DataVizTabs.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-export interface DataVizTabsProps extends React.HTMLAttributes<HTMLDivElement> {
-    heading?: String;
-    introContent?: React.Component;
-    data?: any;
-    testId?: string;
-}
-export declare const DataVizTabs: React.ForwardRefExoticComponent<DataVizTabsProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DataViz/index.d.ts

@@ -1 +0,0 @@
-export * from './DataVizTabs';

package/src/components/DataViz/DataVizTabs.tsx

@@ -1,48 +0,0 @@
-import * as React from 'react';
-
-import {
-  Heading,
-  Paragraph,
-  TabsContainer,
-  Tabs,
-  Tab,
-  TabPanelsContainer,
-  TabPanel,
-} from 'react-magma-dom';
-export interface DataVizTabsProps extends React.HTMLAttributes<HTMLDivElement> {
-  heading?: String;
-  introContent?: React.Component;
-  data?: any;
-  testId?: string;
-}
-
-export const DataVizTabs = React.forwardRef<HTMLDivElement, DataVizTabsProps>(
-  (props, ref) => {
-    const { data, testId, ...other } = props;
-
-    return (
-      <div ref={ref} {...other}>
-        <Heading level={3}>Simple Line</Heading>
-        <Paragraph>
-          Data table description - Lorem ipsum dolor sit amet, consectetur
-          adipiscing elit. Donec ullamcorper quam dolor, at consequat mi pretium
-          in. Duis iaculis ligula nibh, sit amet.
-        </Paragraph>
-        <TabsContainer>
-          <Tabs aria-label="Line Chart Demo">
-            <Tab>Chart</Tab>
-            <Tab>Data</Tab>
-          </Tabs>
-          <TabPanelsContainer>
-            <TabPanel>Chart goes here!</TabPanel>
-            <TabPanel>
-              <Heading level={4}>2019 Annual Sales Figures</Heading>
-              <Paragraph>Conversion rate by month</Paragraph>
-              Table goes here!
-            </TabPanel>
-          </TabPanelsContainer>
-        </TabsContainer>
-      </div>
-    );
-  }
-);

package/src/components/DataViz/index.ts

@@ -1 +0,0 @@
-export * from './DataVizTabs';

package/src/components/LineChart/magma-charts.js

@@ -1,309 +0,0 @@
-import { assign } from 'lodash';
-
-// *
-// * Colors
-// *
-// const yellow200 = '#FFF59D';
-// const deepOrange600 = '#F4511E';
-// const lime300 = '#DCE775';
-// const lightGreen500 = '#8BC34A';
-// const teal700 = '#00796B';
-// const cyan900 = '#006064';
-
-// const colors = [
-//   '#0085CC',
-//   '#E0004D',
-//   '#FA6600',
-//   '#48A200',
-//   '#B12FAD',
-//   '#00A393',
-// ];
-
-const colors = [
-  '#00507A',
-  '#8F0033',
-  '#B84900',
-  '#255200',
-  '#711E6E',
-  '#005249',
-];
-
-const blueGrey50 = '#DFDFDF';
-const blueGrey300 = '#8F8F8F';
-const blueGrey700 = '#3F3F3F';
-const grey900 = 'pink';
-
-// *
-// * Typography
-// *
-const sansSerif = '"Open Sans",Helvetica,sans-serif';
-const letterSpacing = 'normal';
-const fontSize = 12;
-
-// *
-// * Layout
-// *
-const padding = 8;
-const baseProps = {
-  width: 350,
-  height: 350,
-  padding: 50,
-};
-
-// *
-// * Labels
-// *
-const baseLabelStyles = {
-  fontFamily: sansSerif,
-  fontSize,
-  letterSpacing,
-  padding,
-  fill: blueGrey700,
-  stroke: 'transparent',
-  strokeWidth: 0,
-};
-
-const centeredLabelStyles = assign({ textAnchor: 'middle' }, baseLabelStyles);
-// *
-// * Strokes
-// *
-const strokeDasharray = '10, 5';
-const strokeLinecap = 'round';
-const strokeLinejoin = 'round';
-
-// eslint-disable-next-line import/no-anonymous-default-export
-export default {
-  area: assign(
-    {
-      style: {
-        data: {
-          fill: grey900,
-        },
-        labels: baseLabelStyles,
-      },
-    },
-    baseProps
-  ),
-  axis: assign(
-    {
-      style: {
-        axis: {
-          fill: 'transparent',
-          stroke: blueGrey300,
-          strokeWidth: 2,
-          strokeLinecap,
-          strokeLinejoin,
-        },
-        axisLabel: assign({}, centeredLabelStyles, {
-          padding,
-          stroke: 'transparent',
-        }),
-        grid: {
-          fill: 'none',
-          stroke: blueGrey50,
-          //strokeDasharray,
-          strokeLinecap,
-          strokeLinejoin,
-          pointerEvents: 'painted',
-        },
-        ticks: {
-          fill: 'transparent',
-          size: 5,
-          stroke: blueGrey300,
-          strokeWidth: 1,
-          strokeLinecap,
-          strokeLinejoin,
-        },
-        tickLabels: assign({}, baseLabelStyles, {
-          fill: blueGrey700,
-        }),
-      },
-    },
-    baseProps
-  ),
-  polarDependentAxis: assign({
-    style: {
-      ticks: {
-        fill: 'transparent',
-        size: 1,
-        stroke: 'transparent',
-      },
-    },
-  }),
-  bar: assign(
-    {
-      style: {
-        data: {
-          fill: blueGrey700,
-          padding,
-          strokeWidth: 0,
-        },
-        labels: baseLabelStyles,
-      },
-    },
-    baseProps
-  ),
-  boxplot: assign(
-    {
-      style: {
-        max: { padding, stroke: blueGrey700, strokeWidth: 1 },
-        maxLabels: assign({}, baseLabelStyles, { padding: 3 }),
-        median: { padding, stroke: blueGrey700, strokeWidth: 1 },
-        medianLabels: assign({}, baseLabelStyles, { padding: 3 }),
-        min: { padding, stroke: blueGrey700, strokeWidth: 1 },
-        minLabels: assign({}, baseLabelStyles, { padding: 3 }),
-        q1: { padding, fill: blueGrey700 },
-        q1Labels: assign({}, baseLabelStyles, { padding: 3 }),
-        q3: { padding, fill: blueGrey700 },
-        q3Labels: assign({}, baseLabelStyles, { padding: 3 }),
-      },
-      boxWidth: 20,
-    },
-    baseProps
-  ),
-  candlestick: assign(
-    {
-      style: {
-        data: {
-          stroke: blueGrey700,
-        },
-        labels: assign({}, baseLabelStyles, { padding: 5 }),
-      },
-      candleColors: {
-        positive: '#ffffff',
-        negative: blueGrey700,
-      },
-    },
-    baseProps
-  ),
-  chart: baseProps,
-  errorbar: assign(
-    {
-      borderWidth: 8,
-      style: {
-        data: {
-          fill: 'transparent',
-          opacity: 1,
-          stroke: blueGrey700,
-          strokeWidth: 2,
-        },
-        labels: baseLabelStyles,
-      },
-    },
-    baseProps
-  ),
-  group: assign(
-    {
-      colorScale: colors,
-    },
-    baseProps
-  ),
-  histogram: assign(
-    {
-      style: {
-        data: {
-          fill: blueGrey700,
-          stroke: grey900,
-          strokeWidth: 2,
-        },
-        labels: baseLabelStyles,
-      },
-    },
-    baseProps
-  ),
-  legend: {
-    colorScale: colors,
-    gutter: 10,
-    orientation: 'vertical',
-    titleOrientation: 'top',
-    style: {
-      data: {
-        type: 'circle',
-      },
-      labels: baseLabelStyles,
-      title: assign({}, baseLabelStyles, { padding: 5 }),
-    },
-  },
-  line: assign(
-    {
-      style: {
-        data: {
-          fill: 'transparent',
-          opacity: 1,
-          stroke: blueGrey700,
-          strokeWidth: 2,
-        },
-        labels: baseLabelStyles,
-      },
-    },
-    baseProps
-  ),
-  pie: assign(
-    {
-      colorScale: colors,
-      style: {
-        data: {
-          padding,
-          stroke: blueGrey50,
-          strokeWidth: 1,
-        },
-        labels: assign({}, baseLabelStyles, { padding: 20 }),
-      },
-    },
-    baseProps
-  ),
-  scatter: assign(
-    {
-      style: {
-        data: {
-          fill: blueGrey700,
-          opacity: 1,
-          stroke: 'transparent',
-          strokeWidth: 0,
-        },
-        labels: baseLabelStyles,
-      },
-    },
-    baseProps
-  ),
-  stack: assign(
-    {
-      colorScale: colors,
-    },
-    baseProps
-  ),
-  tooltip: {
-    style: assign({}, baseLabelStyles, { padding: 0, pointerEvents: 'none' }),
-    flyoutStyle: {
-      stroke: grey900,
-      strokeWidth: 1,
-      fill: '#f0f0f0',
-      pointerEvents: 'none',
-    },
-    flyoutPadding: 5,
-    cornerRadius: 5,
-    pointerLength: 10,
-  },
-  voronoi: assign(
-    {
-      style: {
-        data: {
-          fill: 'transparent',
-          stroke: 'transparent',
-          strokeWidth: 0,
-        },
-        labels: assign({}, baseLabelStyles, {
-          padding: 5,
-          pointerEvents: 'none',
-        }),
-        flyout: {
-          stroke: grey900,
-          strokeWidth: 1,
-          fill: '#f0f0f0',
-          pointerEvents: 'none',
-        },
-      },
-    },
-    baseProps
-  ),
-};