@react-magma/charts 12.0.1 → 13.0.0

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

@@ -1,279 +0,0 @@
-// *
-// * 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

@@ -1,289 +0,0 @@
-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',
-      },
-    ],
-  },
-];