Neoplastic Plasma Medusa

    @eqworks/chart-system

    0.6.2 • Public • Published

    Charts

    A collection of chart implementations using breakpoint-based responsive designs.

    Import

    import {
      BarChart,
      LineChart,
      ScatterChart,
      PieChart,
    } from '@eqworks/chart-system'
    

    Usage

    Width and height are auto-detected through nivo ResponsiveWrapper. Currently exorting functional implmentations of Bar, Line, Scatter and Pie from Nivo.

    Props

    A catch-all {...nivoProps} is passed along to each chart, though the values might be overriden.

    • data - an array of objects with the same structure, i.e. tabular data,
    • indexBy - the key to use for grouping the data. Results in primary x-axis value in Bar Chart, data series grouping in Line and Scatter as well as how to define the slices in PieChart. Should NOT be included in value keys for chart. Defaults to first item of Object.keys(data[0]).
    • colorType - use design system colors through three methods and a given colorParam. Default is palette
      • 'palette': assign a different hue for each data series; colorParam = lightness value of 10,30,50,70 or 90
      • 'monochromatic:' assign a different lightness for each data series; colorParam = hue value of blue, color, yellow, pink, purple, teal or gray
      • 'random': assign a data series a color at random; no coloParam required
    • colorParam - the param to configure the chosen colorType. Default is 70
    • colors - array of colour hex values or a function to retrieve colour hex values to use for data; overrides colorType.
    • axisBottomLegendLabel - the label for the bottom axis
    • axisBottomTrim - whether or not to trim the bottom axis label values based on chart width. Default is true
    • axisBottomLabelDisplayFn - labelValue => { ...return displayValue } - function to customize the bottom axis tick labels. Default is d => d
    • axisLeftLegendLabel - the label for the left axis
    • axisLeftLabelDisplayFn - labelValue => { ...return displayValue } - function to customize the left axis tick labels. Default is d => d
    • maxRowLegendItems - maximum labels on the bottom / row chart legend. Default is MAX_LEGEND_ITEMS_ROW (3)
    • trimLegend - whether or not to trim chart legend labels. Default is true
    • disableLegend - whether or not to display chart Legend. Default is false
    • tooltipFormat - a function that exposes the final value of the tooltip for formatting. Receives the value as an argument. Default is v => v
    • title - the title text in <Title /> component. Default value is ``
    • titleStyle - styling props for <Title /> component. Default value is
    titleStyle: {
      color: 'black',
      fontSize: '18px',
      fontWeight: 'normal',
      textAlign: 'left'
    }
    • typographyProps - props object for styling chart font family, size, and color. Default values:
    typographyProps: {
        fontFamily: ' \'Open Sans\', sans-serif',
        fontSize: 12,
        textColor: 'black'
      }
    • disableTooltipTitle - prop to hide the title part in the tooltip:
    disableTooltipTitle: { false }

    Bar, Line and Scatter:

    • axisBottomOrder - how to define the order of bottom axis labels for a Bar Chart or 'point' scale. Either [] of specific values or asc/desc to sort the data. If an array is provided, data will be filtered based on the provided keys. Axis scale must be set to { type: 'point' }. To sort dates properly, they need to be a javascript object instead of a string.
    • axisBottomLabelValues - what label values to show on the bottom axis. Either [] of specific values, a number of how many ticks should appear or a string describing the time interval. More details (here | https://nivo.rocks/guides/axes)
    • tooltipFormatX - a function that exposes the final value of the tooltip for formatting the bottom axis since it could be used for dates with TimeSeries. Receives the value as an argument. Default is v => v

    BarChart Only:

    • keys - an array of keys to use as y-axis values. End up as legend items. Defaults to Object.keys(data[0]) excluding the indexBy value.

    PieChart Only:

    • dataKey: the key to use for pie chart values. Defaults to second item of Object.keys(data[0]).
    • isDonut - whether to include innerRadius={0.6} Nivo prop. Default is false
    • enableSlicesLabels - to include % values in the pie chart itself. Defaults is true
    • slicesLabelsSkipAngle - the angle (i.e. width) of a pie slice at which the label is not displayed. Defaults is 30
    • padAngle - padding added around Pie chart slices. Default is 0.7.
    • cornerRadius - radius value to shape the corner of slices. Default is 3.

    Bar Only:

    This charts requires a unique indexBy values to properly render and the following keys allow some aggregation to facilitate that. Ideally, data should be properly processed in advance.

    • groupByKey - a key to use whose values will be transformed into keys, summing data indicated by valueKey. Must be provided with a valueKey. Default is ''
    • valueKey - the value to sum across unique values of groupByKey. Must be provided with a groupByKey. Default is '' For example, given:
    [
      { country: 'usa', vehicle: 'car', amount: 25 },
      { country: 'usa', vehicle: 'boat', amount: 15 },
      { country: 'canada', vehicle: 'car', amount: 20 },
      { country: 'canada', vehicle: 'boat', amount: 30 },
    ]

    If indexBy = 'country' and keys=['amount'] then by default the data would remove the resolution of the vehicle key:

    [{ country: 'usa', amount: 40 }, { country: 'canada', amount: 50 }]

    To include a data series for each vehicle, we can set groupByKey='vehicle' and valueKey='amount' to produce:

    [
      { country: 'usa', car: 25, boat: 15 },
      { country: 'canada', car: 20, boat: 30 },
    ]

    Each unique value of the groupByKey is converted into a key, whose value is the sum of valueKey.

    Line and Scatter Only:

    {
      type: 'point' (default) | 'linear' | 'log' | 'time'
      ...configuration parameters
    }
    

    For example:

    • basic numeric axis
    xScale={{
      type: 'linear',
      min: 0,
      max: 'auto',
    }}
    
    • logarithmic axis
    xScale={{
      type: 'log',
      base: 2,
      max: 'auto',
    }}
    
    • time axis
    xScale={{
      type: 'time',
      format: '%Y-%m-%d',
      useUTC: false,
      precision: 'day',
    }}
    

    Data Processing

    • Bar Chart data does not support duplicate entries for a single x-axis value, because only one bar is drawn. e.g. `[{ indexKey: 'test', value: 1 }, { indexKey: 'test', value: 2 }]. Data is aggregated by default.
    • Line Chart point x-axis does not support duplicate entries for a single x-axis value within a data series, because only one line is drawn. e.g. if 'country' indexes a data series and 'vehicle' is the xKey then, [{ country: 'france', vehicle: 'plane', amount: 31 }, { country: 'france', vehicle: 'plane', amount: 1000 }] will throw an error.
    • Scatter Chart supports duplicates due to the way it is drawn. i.e. subsequent dots don't need to connect.
    • Pie Chart does not support duplicate entries for its indexBy value. Data is aggregated by default.
    • If the key used in indexBy (or groupByKey for bar) has only numbers - even if it is in a string format like '123' - the order of the data cannot be guaranteed to be the same as original, which could affect the order of the legend and color assignment.

    Development:

    Run yarn install and yarn start. Open a browser at http://localhost:9009/ to see demos of implemented charts.

    Keywords

    none

    Install

    npm i @eqworks/chart-system

    DownloadsWeekly Downloads

    1

    Version

    0.6.2

    License

    MIT

    Unpacked Size

    167 kB

    Total Files

    60

    Last publish

    Collaborators

    • catherinezhang
    • woozyking
    • dilshaneq
    • goondrious
    • kevlabs
    • hyx131