lucid-ui
Version:
A UI component library from Xandr.
308 lines • 13.3 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ManyBars = exports.EmptyWithCustomTitleAndBody = exports.Empty = exports.FormattedTooltips = exports.FormattedTooltipValues = exports.UnformattedTooltips = exports.Stacked = exports.AllTheThings = exports.LimitedTicks = exports.GroupedWithLegend = exports.Grouped = exports.BasicResponsive = exports.Basic = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var chartConstants = __importStar(require("../../constants/charts"));
var formatters = __importStar(require("../../util/formatters"));
var Resizer_1 = __importDefault(require("../Resizer/Resizer"));
var BarChart_1 = __importDefault(require("./BarChart"));
var Legend_1 = __importDefault(require("../Legend/Legend"));
exports.default = {
title: 'Visualizations/BarChart',
component: BarChart_1.default,
parameters: {
docs: {
description: {
component: BarChart_1.default.peek.description,
},
},
},
};
/* Basic */
var Basic = function (args) {
var data = [
{ x: '2015-01-01', y: 1 },
{ x: '2015-01-02', y: 2 },
{ x: '2015-01-03', y: 3 },
{ x: '2015-01-04', y: 5 },
];
var style = {
paddingTop: '4rem',
};
return (react_1.default.createElement("div", { style: style },
react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: 750, data: data, yAxisTitle: 'Revenue', margin: { top: 20 } }))));
};
exports.Basic = Basic;
/* Basic Responsive */
var BasicResponsive = function (args) {
var data = [
{ x: '2015-01-01', y: 1 },
{ x: '2015-01-02', y: 2 },
{ x: '2015-01-03', y: 3 },
{ x: '2015-01-04', y: 5 },
];
var style = {
paddingTop: '4rem',
};
return (react_1.default.createElement("div", { style: style },
react_1.default.createElement(Resizer_1.default, null, function (width /*, height */) { return (react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: width, height: width * 0.3, data: data, yAxisTitle: 'Revenue' }))); })));
};
exports.BasicResponsive = BasicResponsive;
exports.BasicResponsive.storyName = 'BasicResponsive';
/* Grouped */
var Grouped = function (args) {
/* eslint-disable comma-spacing */
var data = [
{
x: 'Monday',
apples: 10,
pears: 20,
peaches: 35,
bananas: 15,
oranges: 5,
},
{
x: 'Tuesday',
apples: 20,
pears: 5,
peaches: 20,
bananas: 25,
oranges: 27,
},
{
x: 'Wednesday',
apples: 5,
pears: 15,
peaches: 5,
bananas: 20,
oranges: 35,
},
];
var style = {
paddingTop: '10rem',
};
return (react_1.default.createElement("div", { style: style },
react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: 750, data: data, yAxisFields: ['apples', 'pears', 'peaches', 'bananas', 'oranges'], yAxisMin: 0, yAxisTitle: 'Fruit Count', palette: chartConstants.PALETTE_30 }))));
};
exports.Grouped = Grouped;
/* Grouped With Legend */
var GroupedWithLegend = function (args) {
/* eslint-disable comma-spacing */
var data = [
{
x: 'Monday',
apples: 10,
pears: 20,
peaches: 35,
bananas: 15,
oranges: 5,
},
{
x: 'Tuesday',
apples: 20,
pears: 5,
peaches: 20,
bananas: 25,
oranges: 27,
},
{
x: 'Wednesday',
apples: 5,
pears: 15,
peaches: 5,
bananas: 20,
oranges: 35,
},
];
var yAxisFields = ['apples', 'pears', 'peaches', 'bananas', 'oranges'];
var palette = chartConstants.PALETTE_7;
var style = {
paddingTop: '10rem',
};
return (react_1.default.createElement("div", { style: style },
react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: 750, data: data, yAxisFields: yAxisFields, yAxisMin: 0, yAxisTitle: 'Fruit Count', palette: palette })),
react_1.default.createElement(Legend_1.default, { style: { verticalAlign: 'top' } }, lodash_1.default.map(yAxisFields, function (field, i) { return (react_1.default.createElement(Legend_1.default.Item, { key: field, hasPoint: true, color: palette[i % palette.length] }, field)); }))));
};
exports.GroupedWithLegend = GroupedWithLegend;
exports.GroupedWithLegend.storyName = 'GroupedWithLegend';
/* Limited Ticks */
var LimitedTicks = function (args) {
var data = [
{ x: '2015-01-01', y: 1 },
{ x: '2015-01-02', y: 2 },
{ x: '2015-01-03', y: 3 },
{ x: '2015-01-04', y: 5 },
{ x: '2015-01-05', y: 2 },
{ x: '2015-01-06', y: 3 },
{ x: '2015-01-07', y: 2 },
{ x: '2015-01-08', y: 2 },
{ x: '2015-01-09', y: 5 },
{ x: '2015-01-10', y: 3 },
{ x: '2015-01-11', y: 4 },
{ x: '2015-01-12', y: 4 },
{ x: '2015-01-13', y: 5 },
{ x: '2015-01-14', y: 3 },
{ x: '2015-01-15', y: 4 },
{ x: '2015-01-16', y: 3 },
{ x: '2015-01-17', y: 6 },
];
var style = {
paddingTop: '4rem',
};
return (react_1.default.createElement("div", { style: style },
react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: 750, data: data, yAxisMin: 0, xAxisTickCount: 5, yAxisTickCount: 4 }))));
};
exports.LimitedTicks = LimitedTicks;
exports.LimitedTicks.storyName = 'LimitedTicks';
/* All The Things */
var AllTheThings = function (args) {
/* eslint-disable comma-spacing */
var data = [
{ day: 'monday', apples: 2000, oranges: 3000 },
{ day: 'tuesday', apples: 2000, oranges: 5000 },
{ day: 'wednesday', apples: 3000, oranges: 2000 },
{ day: 'thursday', apples: 5000, oranges: 6000 },
];
var yFormatter = function (d) { return "".concat(d / 1000, "k"); };
var xFormatter = function (d) { return d.toUpperCase().slice(0, 3); };
var style = {
paddingTop: '6rem',
};
return (react_1.default.createElement("div", { style: style },
react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: 750, data: data, colorMap: {
apples: chartConstants.COLOR_GOOD,
oranges: chartConstants.COLOR_1,
}, xAxisField: 'day', xAxisFormatter: xFormatter, xAxisTickCount: 5, xAxisTitle: 'Weekdays', yAxisFields: ['apples', 'oranges'], yAxisFormatter: yFormatter, yAxisTitle: 'Fruit Count', yAxisTickCount: 4 }))));
};
exports.AllTheThings = AllTheThings;
exports.AllTheThings.storyName = 'AllTheThings';
/* Stacked */
var Stacked = function (args) {
var data = [
{ x: 'Monday', apples: 10, pears: 20, peaches: 35 },
{ x: 'Tuesday', apples: 20, pears: 5, peaches: 20 },
{ x: 'Wednesday', apples: 5, pears: 15, peaches: 5 },
];
var style = {
paddingTop: '7rem',
};
return (react_1.default.createElement("div", { style: style },
react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: 750, data: data, yAxisFields: ['apples', 'pears', 'peaches'], yAxisMin: 0, yAxisIsStacked: true, yAxisTitle: 'Fruit Count' }))));
};
exports.Stacked = Stacked;
/* Unformatted Tooltips */
var UnformattedTooltips = function (args) {
var data = [
{ x: '2015-01-01', y: 1200 },
{ x: '2015-01-02', y: 900 },
{ x: '2015-01-03', y: 1800 },
{ x: '2015-01-04', y: 3000 },
];
var style = {
paddingTop: '4rem',
};
return (react_1.default.createElement("div", { style: style },
react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: 750, data: data, yAxisTitle: 'Revenue', yAxisTooltipFormatter: function (yField, yValueFormatted, yValue) { return yValue; } }))));
};
exports.UnformattedTooltips = UnformattedTooltips;
exports.UnformattedTooltips.storyName = 'UnformattedTooltips';
/* Formatted Tooltip Values */
var FormattedTooltipValues = function (args) {
var data = [
{ x: '2015-01-01', y: 1200 },
{ x: '2015-01-02', y: 900 },
{ x: '2015-01-03', y: 1800 },
{ x: '2015-01-04', y: 3000 },
];
var style = {
paddingTop: '4rem',
};
return (react_1.default.createElement("div", { style: style },
react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: 750, data: data, yAxisTitle: 'Revenue', yAxisTooltipDataFormatter: formatters.formatAbbreviatedNumber }))));
};
exports.FormattedTooltipValues = FormattedTooltipValues;
exports.FormattedTooltipValues.storyName = 'FormattedTooltipValues';
/* Formatted Tooltips */
var FormattedTooltips = function (args) {
var data = [
{ x: '2015-01-01', y: 1200 },
{ x: '2015-01-02', y: 900 },
{ x: '2015-01-03', y: 1800 },
{ x: '2015-01-04', y: 3000 },
];
var style = {
paddingTop: '4rem',
};
return (react_1.default.createElement("div", { style: style },
react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: 750, data: data, yAxisTitle: 'Revenue', renderTooltipBody: function (dataPoint) {
return "x value = ".concat(dataPoint.x, " and y value = ").concat(dataPoint.y);
} }))));
};
exports.FormattedTooltips = FormattedTooltips;
exports.FormattedTooltips.storyName = 'FormattedTooltips';
/* Empty */
var Empty = function (args) {
return react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: 750, data: [], yAxisTitle: 'Revenue' }));
};
exports.Empty = Empty;
/* Empty With Custom Title And Body */
var EmptyWithCustomTitleAndBody = function (args) {
var EmptyStateWrapper = BarChart_1.default.EmptyStateWrapper, _a = BarChart_1.default.EmptyStateWrapper, Title = _a.Title, Body = _a.Body;
return (react_1.default.createElement(BarChart_1.default, __assign({}, args, { width: 750, data: [], yAxisTitle: 'Revenue' }),
react_1.default.createElement(EmptyStateWrapper, __assign({}, EmptyStateWrapper.defaultProps),
react_1.default.createElement(Title, null, "Something went wrong."),
react_1.default.createElement(Body, { style: {
fontSize: '12px',
} }, "Echo park poutine esse tempor squid do. Lo-fi ramps XOXO chicharrones laboris, portland fugiat locavore. Fap four dollar toast keytar, cronut kogi fingerstache distillery microdosing everyday carry austin DIY dreamcatcher. Distillery flexitarian meditation laboris roof party. Cred raclette gastropub tilde PBR&B. Shoreditch poke adipisicing, reprehenderit lumbersexual succulents mustache officia franzen vinyl nostrud af. Hashtag bitters organic, before they sold out butcher cronut sapiente."))));
};
exports.EmptyWithCustomTitleAndBody = EmptyWithCustomTitleAndBody;
exports.EmptyWithCustomTitleAndBody.storyName = 'EmptyWithCustomTitleAndBody';
/* Many Bars */
var ManyBars = function (args) {
var data = lodash_1.default.map(lodash_1.default.range(0, 70), function (n) { return ({
x: new Date(0) + n * 60 * 60 * 24,
y: n,
}); });
var style = {
paddingTop: '5rem',
};
return (react_1.default.createElement("div", { style: style },
react_1.default.createElement(BarChart_1.default, __assign({}, args, { data: data, xAxisTextOrientation: 'diagonal', yAxisTextOrientation: 'horizontal', xAxisTickCount: 20, height: 600, width: 750, margin: { bottom: 300, left: 300 } }))));
};
exports.ManyBars = ManyBars;
exports.ManyBars.storyName = 'ManyBars';
//# sourceMappingURL=BarChart.stories.js.map