@hackoregon/component-library
Version:
Official repo for Hack Oregon React component library
314 lines (287 loc) • 11.2 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _victory = require("victory");
var _SimpleLegend = _interopRequireDefault(require("../SimpleLegend"));
var _ChartContainer = _interopRequireDefault(require("../ChartContainer"));
var _civicFormat = _interopRequireDefault(require("../utils/civicFormat"));
var _chartHelpers = require("../utils/chartHelpers");
var _groupByKey = _interopRequireDefault(require("../utils/groupByKey"));
var _VictoryThemeIndex = _interopRequireDefault(require("../VictoryTheme/VictoryThemeIndex"));
var _DataChecker = _interopRequireDefault(require("../utils/DataChecker"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
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; }
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 (0, _chartHelpers.transformDatato100)((0, _groupByKey["default"])(data, dataSeriesKey, dataLabel), dataLabel, dataValue);
}
return (0, _groupByKey["default"])(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 = _VictoryThemeIndex["default"].civic.bar.style.data.width;
var spaceHeight = _VictoryThemeIndex["default"].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 || (0, _chartHelpers.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["default"].createElement(_victory.VictoryLabel, _extends({
dx: props.scale.y(minValue) - 20
}, props, {
textAnchor: "end"
}));
};
return _react["default"].createElement(_ChartContainer["default"], {
title: title,
subtitle: subtitle,
loading: loading,
error: error
}, _react["default"].createElement(_DataChecker["default"], {
dataAccessors: {
dataValue: dataValue
},
data: data
}, legendData && (legendComponent ? legendComponent(legendData) : _react["default"].createElement(_SimpleLegend["default"], {
className: "legend",
legendData: legendData
})), _react["default"].createElement(_victory.VictoryChart, {
height: dataHeight + additionalHeight,
domain: domain,
domainPadding: {
x: 11,
y: 20
},
padding: padding,
theme: _VictoryThemeIndex["default"].civic
}, _react["default"].createElement(_victory.VictoryAxis, {
style: {
tickLabels: {
fill: "none"
},
ticks: {
stroke: "none"
},
grid: {
stroke: "none"
}
},
title: "Y Axis"
}), !minimalist && _react["default"].createElement(_victory.VictoryAxis, {
dependentAxis: true,
orientation: "top",
tickFormat: dataValueFormatter,
title: "X Axis",
offsetY: padding.top
}), !minimalist && _react["default"].createElement(_victory.VictoryPortal, null, _react["default"].createElement(_victory.VictoryLabel, {
style: _objectSpread({}, _VictoryThemeIndex["default"].civic.axisLabel.style),
text: yLabel,
textAnchor: "middle",
title: "Y Axis Label",
verticalAnchor: "end",
x: 50,
y: 65
})), _react["default"].createElement(_victory.VictoryPortal, null, _react["default"].createElement(_victory.VictoryLabel, {
style: _objectSpread({}, _VictoryThemeIndex["default"].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["default"].createElement(_victory.VictoryBar, {
horizontal: true,
labelComponent: _react["default"].createElement(NegativeAwareTickLabel, {
x: 0,
orientation: "left",
theme: _VictoryThemeIndex["default"].civic
}),
domainPadding: 0,
data: barData.map(function (d) {
return {
sortOrder: d[sortOrderKey],
dataValue: d[dataValue],
label: dataLabelFormatter(d[dataLabel])
};
}),
x: "sortOrder",
y: "dataValue",
events: _chartHelpers.chartEvents,
animate: true
}), !stacked && _react["default"].createElement(_victory.VictoryBar, {
horizontal: true,
labelComponent: _react["default"].createElement(_victory.VictoryTooltip, {
x: 325,
y: 0,
orientation: "bottom",
pointerLength: 0,
cornerRadius: 0,
theme: _VictoryThemeIndex["default"].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: _chartHelpers.chartEvents,
animate: true
}), stacked && _react["default"].createElement(_victory.VictoryStack, {
colorScale: (0, _chartHelpers.categoricalColors)(groupedData.length)
}, groupedData.map(function (arr, i) {
return _react["default"].createElement(_victory.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: _chartHelpers.chartEvents,
key: arr[i][dataValue],
labels: arr.map(function (d) {
return "".concat(d[dataSeriesKey], ": ").concat(d[dataValue]);
}),
horizontal: true,
labelComponent: _react["default"].createElement(_victory.VictoryTooltip, {
x: 325,
y: 0,
orientation: "bottom",
pointerLength: 0,
cornerRadius: 0,
theme: _VictoryThemeIndex["default"].civic
}),
animate: true
});
})), stacked && groupedData.map(function (arr, i) {
return _react["default"].createElement(_victory.VictoryAxis, {
style: {
tickFormat: arr[i][dataLabel],
ticks: {
stroke: "none"
},
grid: {
stroke: "none"
}
},
key: arr[i]
});
}))));
};
HorizontalBarChart.propTypes = {
data: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
sortOrder: _propTypes["default"].string,
dataValue: _propTypes["default"].string,
dataLabel: _propTypes["default"].string,
domain: _propTypes["default"].shape({
x: _propTypes["default"].arrayOf(_propTypes["default"].number),
y: _propTypes["default"].arrayOf(_propTypes["default"].number)
}),
loading: _propTypes["default"].bool,
error: _propTypes["default"].string,
title: _propTypes["default"].string,
subtitle: _propTypes["default"].string,
xLabel: _propTypes["default"].string,
yLabel: _propTypes["default"].string,
dataValueFormatter: _propTypes["default"].func,
dataLabelFormatter: _propTypes["default"].func,
minimalist: _propTypes["default"].bool,
stacked: _propTypes["default"].bool,
hundredPercentData: _propTypes["default"].bool,
dataSeriesKey: _propTypes["default"].string,
dataSeriesLabel: _propTypes["default"].shape({}),
legendComponent: _propTypes["default"].func
};
HorizontalBarChart.defaultProps = {
data: null,
sortOrder: null,
dataValue: "x",
dataLabel: "y",
domain: null,
title: null,
subtitle: null,
xLabel: "X",
yLabel: "Y",
dataValueFormatter: _civicFormat["default"].numeric,
dataLabelFormatter: _civicFormat["default"].unformatted,
minimalist: false,
stacked: false,
hundredPercentData: false,
dataSeriesKey: null,
dataSeriesLabel: {},
legendComponent: null
};
var _default = HorizontalBarChart;
exports["default"] = _default;