@hackoregon/component-library
Version:
Official repo for Hack Oregon React component library
295 lines (280 loc) • 9.97 kB
JavaScript
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
import React from "react";
import PropTypes from "prop-types";
import { VictoryAxis, VictoryBar, VictoryChart, VictoryLabel, VictoryPortal, VictoryTooltip, VictoryStack } from "victory";
import SimpleLegend from "../SimpleLegend";
import ChartContainer from "../ChartContainer";
import civicFormat from "../utils/civicFormat";
import { chartEvents, categoricalColors, getDefaultDataSeriesLabels, transformDatato100 } from "../utils/chartHelpers";
import groupByKey from "../utils/groupByKey";
import CivicVictoryTheme from "../VictoryTheme/VictoryThemeIndex";
import DataChecker from "../utils/DataChecker";
var HorizontalBarChart = function HorizontalBarChart(_ref) {
var data = _ref.data,
sortOrder = _ref.sortOrder,
dataValue = _ref.dataValue,
dataLabel = _ref.dataLabel,
domain = _ref.domain,
title = _ref.title,
loading = _ref.loading,
error = _ref.error,
subtitle = _ref.subtitle,
xLabel = _ref.xLabel,
yLabel = _ref.yLabel,
dataValueFormatter = _ref.dataValueFormatter,
dataLabelFormatter = _ref.dataLabelFormatter,
minimalist = _ref.minimalist,
stacked = _ref.stacked,
hundredPercentData = _ref.hundredPercentData,
dataSeriesKey = _ref.dataSeriesKey,
dataSeriesLabel = _ref.dataSeriesLabel,
legendComponent = _ref.legendComponent;
var groupedDataIfStacked = function groupedDataIfStacked() {
if (stacked) {
if (hundredPercentData) {
return transformDatato100(groupByKey(data, dataSeriesKey, dataLabel), dataLabel, dataValue);
}
return groupByKey(data, dataSeriesKey, dataLabel);
}
return data;
};
var groupedData = groupedDataIfStacked();
var barData = sortOrder && sortOrder.length ? data : data.map(function (d, index) {
return _objectSpread({}, d, {
defaultSort: index + 1
});
});
var sortOrderKey = sortOrder && sortOrder.length ? sortOrder : "defaultSort";
var padding = minimalist ? {
left: 115,
right: 50,
bottom: 25,
top: 40
} : {
left: 115,
right: 50,
bottom: 50,
top: 70
};
var barHeight = CivicVictoryTheme.civic.bar.style.data.width;
var spaceHeight = CivicVictoryTheme.civic.bar.style.data.padding * 2;
var additionalHeight = padding.bottom + padding.top;
var minValue = Math.min.apply(Math, [0].concat(_toConsumableArray(data.map(function (d) {
return d[dataValue];
}))));
var bars = stacked ? groupedData.length : data.length;
var spaces = bars - 1;
var dataHeight = bars * barHeight + spaces * spaceHeight;
var dataSeriesLabels = dataSeriesKey ? dataSeriesLabel || getDefaultDataSeriesLabels(data, dataSeriesKey) : null;
var legendData = dataSeriesLabels && dataSeriesLabels.length ? dataSeriesLabels.map(function (series) {
return {
name: series.label
};
}) : null;
var NegativeAwareTickLabel = function NegativeAwareTickLabel(props) {
return React.createElement(VictoryLabel, _extends({
dx: props.scale.y(minValue) - 20
}, props, {
textAnchor: "end"
}));
};
return React.createElement(ChartContainer, {
title: title,
subtitle: subtitle,
loading: loading,
error: error
}, React.createElement(DataChecker, {
dataAccessors: {
dataValue: dataValue
},
data: data
}, legendData && (legendComponent ? legendComponent(legendData) : React.createElement(SimpleLegend, {
className: "legend",
legendData: legendData
})), React.createElement(VictoryChart, {
height: dataHeight + additionalHeight,
domain: domain,
domainPadding: {
x: 11,
y: 20
},
padding: padding,
theme: CivicVictoryTheme.civic
}, React.createElement(VictoryAxis, {
style: {
tickLabels: {
fill: "none"
},
ticks: {
stroke: "none"
},
grid: {
stroke: "none"
}
},
title: "Y Axis"
}), !minimalist && React.createElement(VictoryAxis, {
dependentAxis: true,
orientation: "top",
tickFormat: dataValueFormatter,
title: "X Axis",
offsetY: padding.top
}), !minimalist && React.createElement(VictoryPortal, null, React.createElement(VictoryLabel, {
style: _objectSpread({}, CivicVictoryTheme.civic.axisLabel.style),
text: yLabel,
textAnchor: "middle",
title: "Y Axis Label",
verticalAnchor: "end",
x: 50,
y: 65
})), React.createElement(VictoryPortal, null, React.createElement(VictoryLabel, {
style: _objectSpread({}, CivicVictoryTheme.civic.axisLabel.style),
text: xLabel,
textAnchor: minimalist ? "middle" : "end",
title: "X Axis Label",
verticalAnchor: minimalist ? "middle" : "end",
x: minimalist ? 325 : 600,
y: minimalist ? 20 : 85
})), !stacked && React.createElement(VictoryBar, {
horizontal: true,
labelComponent: React.createElement(NegativeAwareTickLabel, {
x: 0,
orientation: "left",
theme: CivicVictoryTheme.civic
}),
domainPadding: 0,
data: barData.map(function (d) {
return {
sortOrder: d[sortOrderKey],
dataValue: d[dataValue],
label: dataLabelFormatter(d[dataLabel])
};
}),
x: "sortOrder",
y: "dataValue",
events: chartEvents,
animate: true
}), !stacked && React.createElement(VictoryBar, {
horizontal: true,
labelComponent: React.createElement(VictoryTooltip, {
x: 325,
y: 0,
orientation: "bottom",
pointerLength: 0,
cornerRadius: 0,
theme: CivicVictoryTheme.civic
}),
domainPadding: 0,
data: barData.map(function (d) {
return {
sortOrder: d[sortOrderKey],
dataValue: d[dataValue],
label: "".concat(dataLabelFormatter(d[dataLabel]), ": ").concat(dataValueFormatter(d[dataValue]))
};
}),
style: {
data: {
fill: "none"
}
},
title: "Horizontal Bar Chart",
x: "sortOrder",
y: "dataValue",
events: chartEvents,
animate: true
}), stacked && React.createElement(VictoryStack, {
colorScale: categoricalColors(groupedData.length)
}, groupedData.map(function (arr, i) {
return React.createElement(VictoryBar, {
title: "Horizontal Bar Chart",
domainPadding: 0,
data: arr.map(function (d) {
return {
dataKey: d[dataLabel],
dataValue: d[dataValue],
series: d[dataSeriesKey]
};
}),
x: "dataKey",
y: "dataValue",
events: chartEvents,
key: arr[i][dataValue],
labels: arr.map(function (d) {
return "".concat(d[dataSeriesKey], ": ").concat(d[dataValue]);
}),
horizontal: true,
labelComponent: React.createElement(VictoryTooltip, {
x: 325,
y: 0,
orientation: "bottom",
pointerLength: 0,
cornerRadius: 0,
theme: CivicVictoryTheme.civic
}),
animate: true
});
})), stacked && groupedData.map(function (arr, i) {
return React.createElement(VictoryAxis, {
style: {
tickFormat: arr[i][dataLabel],
ticks: {
stroke: "none"
},
grid: {
stroke: "none"
}
},
key: arr[i]
});
}))));
};
HorizontalBarChart.propTypes = {
data: PropTypes.arrayOf(PropTypes.shape({})),
sortOrder: PropTypes.string,
dataValue: PropTypes.string,
dataLabel: PropTypes.string,
domain: PropTypes.shape({
x: PropTypes.arrayOf(PropTypes.number),
y: PropTypes.arrayOf(PropTypes.number)
}),
loading: PropTypes.bool,
error: PropTypes.string,
title: PropTypes.string,
subtitle: PropTypes.string,
xLabel: PropTypes.string,
yLabel: PropTypes.string,
dataValueFormatter: PropTypes.func,
dataLabelFormatter: PropTypes.func,
minimalist: PropTypes.bool,
stacked: PropTypes.bool,
hundredPercentData: PropTypes.bool,
dataSeriesKey: PropTypes.string,
dataSeriesLabel: PropTypes.shape({}),
legendComponent: PropTypes.func
};
HorizontalBarChart.defaultProps = {
data: null,
sortOrder: null,
dataValue: "x",
dataLabel: "y",
domain: null,
title: null,
subtitle: null,
xLabel: "X",
yLabel: "Y",
dataValueFormatter: civicFormat.numeric,
dataLabelFormatter: civicFormat.unformatted,
minimalist: false,
stacked: false,
hundredPercentData: false,
dataSeriesKey: null,
dataSeriesLabel: {},
legendComponent: null
};
export default HorizontalBarChart;