@react-magma/charts 13.0.0 → 13.0.1

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 = '"Work 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/components/LineChart/test/exampleChartData.js

@@ -0,0 +1,289 @@
+export const basicData = [
+  {
+    name: 'Team 1',
+    data: [
+      { x: 1, y: 39, label: 'Team 1, January, $39k' },
+      { x: 2, y: 28, label: 'Team 1, February, $28k' },
+      { x: 3, y: 35, label: 'Team 1, March, $35k' },
+      { x: 4, y: 44, label: 'Team 1, April, $44k' },
+      { x: 5, y: 21, label: 'Team 1, May, $21k' },
+    ],
+  },
+  {
+    name: 'Team 2',
+    data: [
+      { x: 1, y: 27, label: 'Team 2, January, $39k' },
+      { x: 2, y: 33, label: 'Team 2, February, $33k' },
+      { x: 3, y: 39, label: 'Team 2, March, $39k' },
+      { x: 4, y: 28, label: 'Team 2, April, $28k' },
+      { x: 5, y: 19, label: 'Team 2, May, $19k' },
+    ],
+  },
+  {
+    name: 'Team 3',
+    data: [
+      { x: 1, y: 32, label: 'Team 3, January, $39k' },
+      { x: 2, y: 41, label: 'Team 3, February, $39k' },
+      { x: 3, y: 45, label: 'Team 3, March, $39k' },
+      { x: 4, y: 56, label: 'Team 3, April, $39k' },
+      { x: 5, y: 48, label: 'Team 3, May, $39k' },
+    ],
+  },
+  {
+    name: 'Team 4',
+    data: [
+      { x: 1, y: 48, label: 'Team 4, January, $48k' },
+      { x: 2, y: 66, label: 'Team 4, February, $66k' },
+      { x: 3, y: 52, label: 'Team 4, March, $52k' },
+      { x: 4, y: 36, label: 'Team 4, April, $36k' },
+      { x: 5, y: 10, label: 'Team 4, May, $10k' },
+    ],
+  },
+];
+
+export const explicitData = [
+  {
+    name: 'Team 1',
+    data: [
+      { month: 1, sales: 39, label: 'Team 1, January, $39k' },
+      { month: 2, sales: 28, label: 'Team 1, February, $28k' },
+      { month: 3, sales: 35, label: 'Team 1, March, $35k' },
+      { month: 4, sales: 44, label: 'Team 1, April, $44k' },
+      { month: 5, sales: 21, label: 'Team 1, May, $21k' },
+    ],
+  },
+  {
+    name: 'Team 2',
+    data: [
+      { month: 1, sales: 27, label: 'Team 2, January, $39k' },
+      { month: 2, sales: 33, label: 'Team 2, February, $33k' },
+      { month: 3, sales: 39, label: 'Team 2, March, $39k' },
+      { month: 4, sales: 28, label: 'Team 2, April, $28k' },
+      { month: 5, sales: 19, label: 'Team 2, May, $19k' },
+    ],
+  },
+  {
+    name: 'Team 3',
+    data: [
+      { month: 1, sales: 32, label: 'Team 3, January, $39k' },
+      { month: 2, sales: 41, label: 'Team 3, February, $39k' },
+      { month: 3, sales: 45, label: 'Team 3, March, $39k' },
+      { month: 4, sales: 56, label: 'Team 3, April, $39k' },
+      { month: 5, sales: 48, label: 'Team 3, May, $39k' },
+    ],
+  },
+  {
+    name: 'Team 4',
+    data: [
+      { month: 1, sales: 48, label: 'Team 4, January, $48k' },
+      { month: 2, sales: 66, label: 'Team 4, February, $66k' },
+      { month: 3, sales: 52, label: 'Team 4, March, $52k' },
+      { month: 4, sales: 36, label: 'Team 4, April, $36k' },
+      { month: 5, sales: 10, label: 'Team 4, May, $10k' },
+    ],
+  },
+];
+
+export const historyOfTexas = [
+  {
+    name: 'Enslaved People in Texas',
+    data: [
+      { year: 1836, number: 5000, label: '5000 people enslaved in 1836' },
+      { year: 1845, number: 30000, label: '30,000 people enslaved in 1845' },
+      { year: 1846, number: 30505, label: '30,505 people enslaved in 1846' },
+      { year: 1847, number: 39056, label: '39,056 people enslaved in 1847' },
+      { year: 1848, number: 40308, label: '40,308 people enslaved in 1848' },
+      { year: 1849, number: 42759, label: '42,759 people enslaved in 1849' },
+      { year: 1850, number: 48145, label: '48,145 people enslaved in 1850' },
+      { year: 1851, number: 58740, label: '58,740 people enslaved in 1851' },
+      { year: 1852, number: 68584, label: '68,584 people enslaved in 1852' },
+      { year: 1853, number: 78306, label: '78,306 people enslaved in 1853' },
+      { year: 1854, number: 90003, label: '90,003 people enslaved in 1854' },
+      { year: 1855, number: 105186, label: '105,186 people enslaved in 1855' },
+      { year: 1856, number: 113139, label: '113,139 people enslaved in 1856' },
+      { year: 1857, number: 124782, label: '124,782 people enslaved in 1857' },
+      { year: 1858, number: 133737, label: '133,737 people enslaved in 1858' },
+      { year: 1859, number: 146370, label: '146,370 people enslaved in 1859' },
+      { year: 1860, number: 160467, label: '160,467 people enslaved in 1860' },
+      { year: 1861, number: 169166, label: '169,166 people enslaved in 1861' },
+    ],
+  },
+];
+
+export const spendingRevenue = [
+  {
+    name: 'Texas',
+    data: [
+      { x: 'Personal Income Tax', y: 0, label: 'Texas Personal Income Tax 0%' },
+      { x: 'Average Sales Tax', y: 0, label: 'Texas Average Sales Tax 0%' },
+      {
+        x: 'Average Property Tax',
+        y: 0.3,
+        label: 'Texas Average Property Tax 0.3%',
+      },
+    ],
+  },
+  {
+    name: 'US low',
+    data: [
+      {
+        x: 'Personal Income Tax',
+        y: 0,
+        label: 'US Low Personal Income Tax 0%',
+      },
+      {
+        x: 'Average Sales Tax',
+        y: 8.19,
+        label: 'US Low Average Sales Tax 8.19%',
+      },
+      {
+        x: 'Average Property Tax',
+        y: 1.69,
+        label: 'US Low Average Property Tax 1.69%',
+      },
+    ],
+  },
+  {
+    name: 'US high',
+    data: [
+      {
+        x: 'Personal Income Tax',
+        y: 13,
+        label: 'US High Personal Income Tax 13%',
+      },
+      {
+        x: 'Average Sales Tax',
+        y: 9.53,
+        label: 'US High Average Sales Tax 9.53%',
+      },
+      {
+        x: 'Average Property Tax',
+        y: 2.21,
+        label: 'US High Average Property Tax 2.21%',
+      },
+    ],
+  },
+];
+
+export const votingParticipation = [
+  {
+    name: 'US Data',
+    data: [
+      {
+        year: '2000',
+        percent: 54.2,
+        label: '54.2% turnout in 2000',
+      },
+      {
+        year: '2002',
+        percent: 39.5,
+        label: '39.5% turnout in 2000',
+      },
+      {
+        year: '2004',
+        percent: 60.1,
+        label: '60.1% turnout in 2000',
+      },
+      {
+        year: '2006',
+        percent: 40.4,
+        label: '40.4% turnout in 2000',
+      },
+      {
+        year: '2008',
+        percent: 61.6,
+        label: '61.6% turnout in 2000',
+      },
+      {
+        year: '2010',
+        percent: 41,
+        label: '41% turnout in 2000',
+      },
+      {
+        year: '2012',
+        percent: 58,
+        label: '58% turnout in 2000',
+      },
+      {
+        year: '2014',
+        percent: 36,
+        label: '36% turnout in 2000',
+      },
+      {
+        year: '2016',
+        percent: 59.2,
+        label: '59.2% turnout in 2000',
+      },
+      {
+        year: '2018',
+        percent: 49.4,
+        label: '49.4% turnout in 2000',
+      },
+      {
+        year: '2020',
+        percent: 66.7,
+        label: '66.7% turnout in 2000',
+      },
+    ],
+  },
+  {
+    name: 'Texas Data',
+    data: [
+      {
+        year: '2000',
+        percent: 49.2,
+        label: '49.2% turnout in 2000',
+      },
+      {
+        year: '2002',
+        percent: 34.2,
+        label: '34.2% turnout in 2000',
+      },
+      {
+        year: '2004',
+        percent: 53.7,
+        label: '53.7% turnout in 2000',
+      },
+      {
+        year: '2006',
+        percent: 30.9,
+        label: '30.9% turnout in 2000',
+      },
+      {
+        year: '2008',
+        percent: 54.1,
+        label: '54.1% turnout in 2000',
+      },
+      {
+        year: '2010',
+        percent: 32.1,
+        label: '32.1% turnout in 2000',
+      },
+      {
+        year: '2012',
+        percent: 49.6,
+        label: '49.6% turnout in 2000',
+      },
+      {
+        year: '2014',
+        percent: 28.3,
+        label: '28.3% turnout in 2000',
+      },
+      {
+        year: '2016',
+        percent: 51.4,
+        label: '51.4% turnout in 2000',
+      },
+      {
+        year: '2018',
+        percent: 45.6,
+        label: '45.6% turnout in 2000',
+      },
+      {
+        year: '2020',
+        percent: 60.4,
+        label: '60.4% turnout in 2000',
+      },
+    ],
+  },
+];

package/src/index.ts

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

package/dist/components/CarbonChart/CarbonChart.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/CarbonChart/embeddedStyles.d.ts

@@ -1 +0,0 @@
-export declare const carbonChartStyles: import("@emotion/react").SerializedStyles;