@hackoregon/component-library/es/VictoryTheme/CivicVictoryTheme.js

Official repo for Hack Oregon React component library

import { assign } from "lodash";
var civicPrimary = "#1f1123";
var civicSecondary = "#eb4d5f";
var civicTertiary = "#716470";
var civicSecondaryLighter = "#aaa4ab";
var civicSecondaryLightest = "#f3f2f3";
var civicCategoricalColor1 = "#DC4556";
var civicCategoricalColor2 = "#19B7AA";
var civicCategoricalColor3 = "#1E62BD";
var civicCategoricalColor4 = "#721D7C";
var civicCategoricalColor5 = "#FFB226";
var colors = [civicCategoricalColor1, civicCategoricalColor2, civicCategoricalColor3, civicCategoricalColor4, civicCategoricalColor5, civicTertiary];
var sansSerif = "'Roboto Condensed', 'Helvetica Neue', Helvetica, sans-serif";
var letterSpacing = "normal";
var fontSize = 12;
var fontWeight = "normal";
var padding = 8;
var horizontalBarPadding = 2;
var baseProps = {
  width: 650,
  height: 350,
  padding: 50
};
var tooltipProps = {
  x: 325,
  y: 0,
  orientation: "bottom",
  pointerLength: 0,
  cornerRadius: 0
};
var baseLabelStyles = {
  fontFamily: sansSerif,
  fontSize: fontSize,
  fontWeight: fontWeight,
  letterSpacing: letterSpacing,
  padding: padding,
  fill: civicPrimary
};
var centeredLabelStyles = assign({
  textAnchor: "middle"
}, baseLabelStyles);
var pieLabelStyles = {
  fontFamily: sansSerif,
  fontSize: "16px",
  fontWeight: "bold"
};
var axisLabelStyles = {
  fontFamily: sansSerif,
  fontSize: "14px",
  fontWeight: "bold"
};
var strokeDasharray = "10, 5";
var strokeLinecap = "round";
var strokeLinejoin = "round";
export default {
  area: assign({
    style: {
      data: {
        fill: "white",
        stroke: civicPrimary,
        strokeWidth: 1
      },
      labels: centeredLabelStyles
    }
  }, baseProps),
  areaScatter: assign({
    style: {
      data: {
        fill: "white",
        stroke: civicPrimary,
        strokeWidth: 1
      }
    }
  }, baseProps),
  axis: assign({
    style: {
      axis: {
        fill: "transparent",
        stroke: civicSecondaryLighter,
        strokeWidth: 2,
        strokeLinecap: strokeLinecap,
        strokeLinejoin: strokeLinejoin
      },
      axisLabel: assign({}, centeredLabelStyles, {
        padding: padding,
        stroke: "transparent"
      }),
      grid: {
        fill: "transparent",
        stroke: civicSecondaryLightest,
        strokeDasharray: strokeDasharray,
        strokeLinecap: strokeLinecap,
        strokeLinejoin: strokeLinejoin
      },
      ticks: {
        fill: "transparent",
        padding: padding,
        size: 5,
        stroke: civicSecondaryLighter,
        strokeWidth: 1,
        strokeLinecap: strokeLinecap,
        strokeLinejoin: strokeLinejoin
      },
      tickLabels: assign({}, baseLabelStyles, {
        fill: civicPrimary,
        stroke: "transparent"
      })
    }
  }, baseProps),
  axisLabel: assign({
    style: axisLabelStyles
  }, baseProps),
  bar: assign({
    style: {
      data: {
        fill: civicTertiary,
        padding: horizontalBarPadding,
        stroke: "transparent",
        strokeWidth: 0,
        width: 20
      },
      labels: baseLabelStyles
    }
  }, baseProps),
  candlestick: assign({
    style: {
      data: {
        stroke: civicSecondaryLighter
      },
      labels: centeredLabelStyles
    },
    candleColors: {
      positive: "#ffffff",
      negative: civicSecondaryLighter
    }
  }, baseProps),
  chart: assign({
    animate: {
      duration: 1000
    }
  }, baseProps),
  errorbar: assign({
    style: {
      data: {
        fill: "transparent",
        opacity: 1,
        stroke: civicSecondaryLighter,
        strokeWidth: 2
      },
      labels: assign({}, centeredLabelStyles, {
        stroke: "transparent",
        strokeWidth: 0
      })
    }
  }, baseProps),
  group: assign({
    colorScale: colors
  }, 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: civicSecondaryLighter,
        strokeWidth: 2
      },
      labels: assign({}, baseLabelStyles, {
        stroke: "transparent",
        strokeWidth: 0,
        textAnchor: "start"
      })
    }
  }, baseProps),
  pie: assign({
    colorScale: colors,
    style: {
      data: {
        padding: padding,
        stroke: "white",
        strokeWidth: 2
      },
      labels: assign({}, baseLabelStyles, {
        padding: 20,
        stroke: "transparent",
        strokeWidth: 0
      })
    }
  }, baseProps),
  pieLabel: assign({
    style: pieLabelStyles
  }, baseProps),
  scatter: assign({
    style: {
      data: {
        fill: civicSecondaryLighter,
        opacity: 1,
        stroke: "transparent",
        strokeWidth: 0
      },
      labels: assign({}, centeredLabelStyles, {
        stroke: "transparent"
      })
    }
  }, baseProps),
  stack: assign({
    colorScale: colors
  }, baseProps),
  tooltip: assign({
    style: {
      data: {
        fill: "transparent",
        stroke: "transparent",
        strokeWidth: 0
      },
      labels: centeredLabelStyles,
      customHoverColor: civicSecondary
    },
    flyoutStyle: {
      stroke: "transparent",
      strokeWidth: 1,
      fill: civicSecondaryLightest
    },
    flyoutProps: {
      cornerRadius: 10,
      pointerLength: 10
    }
  }, tooltipProps),
  voronoi: assign({
    style: {
      data: {
        fill: "transparent",
        stroke: "transparent",
        strokeWidth: 0
      },
      labels: centeredLabelStyles
    }
  }, baseProps)
};