lucid-ui
Version:
A UI component library from Xandr.
611 lines • 23.2 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.FineGrainedTicks = exports.Loading = exports.EmptyWithButton = exports.EmptyWithCustomTitleAndBody = exports.Empty = exports.ColorOffset = exports.AbbreviatedNumbers = exports.StackedMonochromeNoShapes = exports.StackedSingleSeriesWithFormatters = exports.AllTheThings = exports.DualAxis = exports.Stacked = exports.MultiWithLegend = exports.Multi = exports.Responsive = exports.Basic = void 0;
var lodash_1 = __importDefault(require("lodash"));
var react_1 = __importDefault(require("react"));
var Resizer_1 = __importDefault(require("../Resizer/Resizer"));
var Button_1 = __importDefault(require("../Button/Button"));
var chartConstants = __importStar(require("../../constants/charts"));
var LineChart_1 = __importDefault(require("./LineChart"));
var Legend_1 = __importDefault(require("../Legend/Legend"));
var formatters = __importStar(require("../../util/formatters"));
exports.default = {
title: 'Visualizations/LineChart',
component: LineChart_1.default,
parameters: {
docs: {
description: {
component: LineChart_1.default.peek.description,
},
},
},
args: LineChart_1.default.defaultProps,
};
/* Basic */
var Basic = function (args) {
var data = [
{ x: new Date('2015-01-01T00:00:00-08:00'), y: 1 },
{ x: new Date('2015-01-02T00:00:00-08:00'), y: 0 },
{ x: new Date('2015-01-03T00:00:00-08:00'), y: 3 },
{ x: new Date('2015-01-04T00:00:00-08:00'), y: 5 },
];
var style = {
paddingTop: '4rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: data, width: 800 }))));
};
exports.Basic = Basic;
/* Responsive */
var Responsive = function (args) {
var data = [
{ x: new Date('2015-01-01T00:00:00-08:00'), y: 1 },
{ x: new Date('2015-01-02T00:00:00-08:00'), y: 2 },
{ x: new Date('2015-01-03T00:00:00-08:00'), y: 3 },
{ x: new Date('2015-01-04T00:00:00-08:00'), y: 5 },
];
var style = {
paddingTop: '4rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(Resizer_1.default, null, function (width /*, height */) { return (react_1.default.createElement(LineChart_1.default, __assign({}, args, { width: width, height: width * 0.3, data: data }))); })));
};
exports.Responsive = Responsive;
/* Multi */
var Multi = function (args) {
var data = [
{
x: new Date('2015-01-01T00:00:00-08:00'),
apples: 184,
oranges: 142,
pears: 117,
},
{
x: new Date('2015-01-02T00:00:00-08:00'),
apples: 191,
oranges: 145,
pears: 118,
},
{
x: new Date('2015-01-03T00:00:00-08:00'),
apples: 114,
oranges: 107,
pears: 103,
},
{
x: new Date('2015-01-04T00:00:00-08:00'),
apples: 24,
oranges: 62,
pears: 85,
},
{
x: new Date('2015-01-05T00:00:00-08:00'),
apples: 4,
oranges: 52,
pears: 81,
},
{
x: new Date('2015-01-06T00:00:00-08:00'),
apples: 72,
oranges: 86,
pears: 94,
},
{
x: new Date('2015-01-07T00:00:00-08:00'),
apples: 166,
oranges: 133,
pears: 113,
},
{
x: new Date('2015-01-08T00:00:00-08:00'),
apples: 199,
oranges: 149,
pears: 120,
},
{
x: new Date('2015-01-09T00:00:00-08:00'),
apples: 141,
oranges: 121,
pears: 108,
},
{
x: new Date('2015-01-10T00:00:00-08:00'),
apples: 46,
oranges: 73,
pears: 89,
},
{
x: new Date('2015-01-11T00:00:00-08:00'),
apples: 0,
oranges: 50,
pears: 80,
},
{
x: new Date('2015-01-12T00:00:00-08:00'),
apples: 46,
oranges: 73,
pears: 89,
},
{
x: new Date('2015-01-13T00:00:00-08:00'),
apples: 142,
oranges: 121,
pears: 108,
},
{
x: new Date('2015-01-14T00:00:00-08:00'),
apples: 199,
oranges: 150,
pears: 120,
},
{
x: new Date('2015-01-15T00:00:00-08:00'),
apples: 165,
oranges: 133,
pears: 113,
},
{
x: new Date('2015-01-16T00:00:00-08:00'),
apples: 71,
oranges: 86,
pears: 94,
},
{
x: new Date('2015-01-17T00:00:00-08:00'),
apples: 4,
oranges: 52,
pears: 81,
},
{
x: new Date('2015-01-18T00:00:00-08:00'),
apples: 25,
oranges: 62,
pears: 85,
},
{
x: new Date('2015-01-19T00:00:00-08:00'),
apples: 115,
oranges: 107,
pears: 103,
},
{
x: new Date('2015-01-20T00:00:00-08:00'),
apples: 191,
oranges: 146,
pears: 118,
},
{
x: new Date('2015-01-21T00:00:00-08:00'),
apples: 184,
oranges: 142,
pears: 117,
},
{
x: new Date('2015-01-22T00:00:00-08:00'),
apples: 99,
oranges: 100,
pears: 100,
},
{
x: new Date('2015-01-23T00:00:00-08:00'),
apples: 15,
oranges: 58,
pears: 83,
},
{
x: new Date('2015-01-24T00:00:00-08:00'),
apples: 9,
oranges: 55,
pears: 82,
},
{
x: new Date('2015-01-25T00:00:00-08:00'),
apples: 87,
oranges: 93,
pears: 97,
},
{
x: new Date('2015-01-26T00:00:00-08:00'),
apples: 176,
oranges: 138,
pears: 115,
},
{
x: new Date('2015-01-27T00:00:00-08:00'),
apples: 196,
oranges: 148,
pears: 119,
},
{
x: new Date('2015-01-28T00:00:00-08:00'),
apples: 127,
oranges: 114,
pears: 105,
},
{
x: new Date('2015-01-29T00:00:00-08:00'),
apples: 3,
oranges: 67,
pears: 87,
},
];
var style = {
paddingTop: '8rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: data, yAxisFields: ['apples', 'oranges', 'pears'], yAxisTitle: 'Fruit Count', width: 800 }))));
};
exports.Multi = Multi;
/* Multi With Legend */
var MultiWithLegend = function (args) {
var data = [
{
x: new Date('2015-01-01T00:00:00-08:00'),
apples: 2,
oranges: 3,
pears: 1,
},
{
x: new Date('2015-01-02T00:00:00-08:00'),
apples: 2,
oranges: 5,
pears: 6,
},
{
x: new Date('2015-01-03T00:00:00-08:00'),
apples: 3,
oranges: 2,
pears: 4,
},
{
x: new Date('2015-01-04T00:00:00-08:00'),
apples: 5,
oranges: 6,
pears: 1,
},
];
var yAxisFields = ['apples', 'oranges', 'pears'];
var palette = chartConstants.PALETTE_MONOCHROME_2_5;
var style = {
paddingTop: '8rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: data, yAxisFields: yAxisFields, yAxisTitle: 'Fruit Count', palette: palette, width: 800 })),
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, hasLine: true, color: palette[i % palette.length], pointKind: i }, field)); }))));
};
exports.MultiWithLegend = MultiWithLegend;
/* Stacked */
var Stacked = function (args) {
var data = [
{
x: new Date('2015-01-01T00:00:00-08:00'),
apples: 2,
oranges: 3,
pears: 1,
bananas: 7,
kiwis: 5,
cherries: 3,
},
{
x: new Date('2015-01-02T00:00:00-08:00'),
apples: 2,
oranges: 5,
pears: 6,
bananas: 7,
kiwis: 5,
cherries: 5,
},
{
x: new Date('2015-01-03T00:00:00-08:00'),
apples: 3,
oranges: 2,
pears: 4,
bananas: 7,
kiwis: 5,
cherries: 2,
},
{
x: new Date('2015-01-04T00:00:00-08:00'),
apples: 5,
oranges: 6,
pears: 1,
bananas: 7,
kiwis: 5,
cherries: 1,
},
{
x: new Date('2015-01-05T00:00:00-08:00'),
apples: 4,
oranges: 3,
pears: 2,
bananas: 7,
kiwis: 5,
cherries: 3,
},
{
x: new Date('2015-01-06T00:00:00-08:00'),
apples: 3,
oranges: 4,
pears: 4,
bananas: 7,
kiwis: 5,
cherries: 5,
},
];
var style = {
paddingTop: '11rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: data, yAxisFields: [
'apples',
'oranges',
'pears',
'bananas',
'kiwis',
'cherries',
], yAxisIsStacked: true, yAxisTitle: 'Fruit Count', width: 800 }))));
};
exports.Stacked = Stacked;
/* Dual Axis */
var DualAxis = function (args) {
var data = [
{ x: new Date('2015-01-01T00:00:00-08:00'), bananas: 2, cherries: 8 },
{ x: new Date('2015-03-02T00:00:00-08:00'), bananas: 2, cherries: 5 },
{ x: new Date('2015-05-03T00:00:00-08:00'), bananas: 3, cherries: 5 },
{ x: new Date('2015-07-04T00:00:00-08:00'), bananas: 5, cherries: 6 },
];
var style = {
paddingTop: '5rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: data, margin: {
right: 80,
}, width: 800, colorMap: {
bananas: chartConstants.COLOR_4,
cherries: chartConstants.COLOR_2,
}, yAxisFields: ['bananas'], yAxisTitle: 'Number of Bananas', yAxisTitleColor: chartConstants.COLOR_4, y2AxisFields: ['cherries'], y2AxisTitle: 'Number of Cherries', y2AxisTitleColor: chartConstants.COLOR_2 }))));
};
exports.DualAxis = DualAxis;
/* All The Things */
var AllTheThings = function (args) {
var data = [
{
date: new Date('2015-01-01T00:00:00-08:00'),
blueberries: 2000,
oranges: 3000,
},
{
date: new Date('2015-01-02T00:00:00-08:00'),
blueberries: 2000,
oranges: 5000,
},
{
date: new Date('2015-01-03T00:00:00-08:00'),
blueberries: 3000,
oranges: 2000,
},
{ date: new Date('2015-01-04T00:00:00-08:00'), blueberries: 5000 },
{
date: new Date('2015-01-05T00:00:00-08:00'),
blueberries: 2500,
oranges: 6300,
},
{
date: new Date('2015-01-06T00:00:00-08:00'),
blueberries: 1500,
oranges: 6100,
},
];
var yFormatter = function (d) { return "".concat(d / 1000, "k"); };
var xFormatter = function (d) { return "".concat(d.getMonth() + 1, "-").concat(d.getDate()); };
var style = {
paddingTop: '5rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(LineChart_1.default, __assign({}, args, { margin: {
right: 80,
}, width: 800, data: data, colorMap: {
blueberries: chartConstants.COLOR_0,
oranges: chartConstants.COLOR_1,
}, xAxisField: 'date', xAxisFormatter: xFormatter, xAxisMin: new Date('2014-12-31T00:00-08:00'), xAxisMax: new Date('2015-01-07T00:00-08:00'), xAxisTickCount: 5, xAxisTitle: 'Date', yAxisFields: ['blueberries'], yAxisFormatter: yFormatter, yAxisTickCount: 5, yAxisTitle: 'Number of Blueberries', yAxisTitleColor: chartConstants.COLOR_0, y2AxisFields: ['oranges'], y2AxisFormatter: yFormatter, y2AxisTickCount: 5, y2AxisTitle: 'Number of Oranges', y2AxisHasPoints: false, y2AxisTitleColor: chartConstants.COLOR_1 }))));
};
exports.AllTheThings = AllTheThings;
/* Stacked Single Series With Formatters */
var StackedSingleSeriesWithFormatters = function (args) {
var data = [
{ x: new Date('2015-01-01T00:00:00-08:00'), y: 1.55 },
{ x: new Date('2015-01-02T00:00:00-08:00'), y: 2.67 },
{ x: new Date('2015-01-03T00:00:00-08:00'), y: 3.31 },
{ x: new Date('2015-01-04T00:00:00-08:00'), y: 5.99 },
];
var style = {
paddingTop: '4rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(LineChart_1.default, __assign({}, args, { yAxisIsStacked: true, yAxisFormatter: function (yValue) { return "$ ".concat(yValue); }, yAxisTooltipFormatter: function (yField, yValueFormatted) { return yValueFormatted; }, data: data, width: 800 }))));
};
exports.StackedSingleSeriesWithFormatters = StackedSingleSeriesWithFormatters;
/* Stacked Monochrome No Shapes */
var StackedMonochromeNoShapes = function (args) {
var data = [
{
x: new Date('2015-01-01T00:00:00-08:00'),
apples: 2,
oranges: 3,
pears: 1,
bananas: 7,
kiwis: 5,
},
{
x: new Date('2015-01-02T00:00:00-08:00'),
apples: 2,
oranges: 5,
pears: 6,
bananas: 7,
kiwis: 5,
},
{
x: new Date('2015-01-03T00:00:00-08:00'),
apples: 3,
oranges: 2,
pears: 4,
bananas: 7,
kiwis: 5,
},
{
x: new Date('2015-01-04T00:00:00-08:00'),
apples: 5,
oranges: 6,
pears: 1,
bananas: 7,
kiwis: 5,
},
{
x: new Date('2015-01-05T00:00:00-08:00'),
apples: 4,
oranges: 3,
pears: 2,
bananas: 7,
kiwis: 5,
},
{
x: new Date('2015-01-06T00:00:00-08:00'),
apples: 3,
oranges: 4,
pears: 4,
bananas: 7,
kiwis: 5,
},
];
var style = {
paddingTop: '10rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: data, width: 800, yAxisFields: ['apples', 'oranges', 'pears', 'bananas', 'kiwis'], yAxisIsStacked: true, yAxisHasPoints: false, yAxisTitle: 'Fruit Count', palette: chartConstants.PALETTE_MONOCHROME_0_5 }))));
};
exports.StackedMonochromeNoShapes = StackedMonochromeNoShapes;
/* Abbreviated Numbers */
var AbbreviatedNumbers = function (args) {
var data = [
{ x: new Date('2015-01-07T00:00:00-08:00'), blueberries: 1030872156 },
{ x: new Date('2015-01-08T00:00:00-08:00'), blueberries: 4002156 },
{ x: new Date('2015-01-09T00:00:00-08:00'), blueberries: 214872156 },
{ x: new Date('2015-01-10T00:00:00-08:00'), blueberries: 42872156 },
{ x: new Date('2015-01-11T00:00:00-08:00'), blueberries: 4230872156 },
];
var style = {
paddingTop: '4rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: data, width: 800, yAxisFields: ['blueberries'], yAxisFormatter: formatters.formatAbbreviatedNumber, yAxisTooltipDataFormatter: formatters.formatThousands }))));
};
exports.AbbreviatedNumbers = AbbreviatedNumbers;
/* Color Offset */
var ColorOffset = function (args) {
var data = [
{ x: new Date('2015-01-01T00:00:00-08:00'), apples: 184, pears: 117 },
{ x: new Date('2015-01-02T00:00:00-08:00'), apples: 191, pears: 118 },
{ x: new Date('2015-01-03T00:00:00-08:00'), apples: 114, pears: 103 },
{ x: new Date('2015-01-04T00:00:00-08:00'), apples: 24, pears: 85 },
{ x: new Date('2015-01-05T00:00:00-08:00'), apples: 4, pears: 81 },
{ x: new Date('2015-01-06T00:00:00-08:00'), apples: 72, pears: 94 },
{ x: new Date('2015-01-07T00:00:00-08:00'), apples: 166, pears: 113 },
{ x: new Date('2015-01-08T00:00:00-08:00'), apples: 199, pears: 120 },
{ x: new Date('2015-01-09T00:00:00-08:00'), apples: 141, pears: 108 },
{ x: new Date('2015-01-10T00:00:00-08:00'), apples: 46, pears: 89 },
{ x: new Date('2015-01-11T00:00:00-08:00'), apples: 0, pears: 80 },
{ x: new Date('2015-01-12T00:00:00-08:00'), apples: 46, pears: 89 },
{ x: new Date('2015-01-13T00:00:00-08:00'), apples: 142, pears: 108 },
{ x: new Date('2015-01-14T00:00:00-08:00'), apples: 199, pears: 120 },
{ x: new Date('2015-01-15T00:00:00-08:00'), apples: 165, pears: 113 },
];
var style = {
paddingTop: '5rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: data, margin: {
right: 80,
}, width: 800, hasLegend: true, yAxisFields: ['apples'], yAxisColorOffset: 3, y2AxisFields: ['pears'], y2AxisColorOffset: 4 }))));
};
exports.ColorOffset = ColorOffset;
/* Empty */
var Empty = function (args) {
return (react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: [], yAxisFields: ['blueberries'], width: 800 })));
};
exports.Empty = Empty;
/* Empty With Custom Title And Body */
var EmptyWithCustomTitleAndBody = function (args) {
var EmptyStateWrapper = LineChart_1.default.EmptyStateWrapper, _a = LineChart_1.default.EmptyStateWrapper, Title = _a.Title, Body = _a.Body;
return (react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: [], yAxisFields: ['blueberries'], width: 800 }),
react_1.default.createElement(EmptyStateWrapper, null,
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;
/* Empty With Button */
var EmptyWithButton = function (args) {
var EmptyStateWrapper = LineChart_1.default.EmptyStateWrapper, _a = LineChart_1.default.EmptyStateWrapper, Title = _a.Title, Body = _a.Body;
return (react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: [], yAxisFields: ['blueberries'], width: 800 }),
react_1.default.createElement(EmptyStateWrapper, null,
react_1.default.createElement(Title, null, "Something went wrong."),
react_1.default.createElement(Body, { style: {
fontSize: '12px',
} },
react_1.default.createElement(Button_1.default, null, "Action")))));
};
exports.EmptyWithButton = EmptyWithButton;
/* Loading */
var Loading = function (args) {
return react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: [], width: 800, isLoading: true }));
};
exports.Loading = Loading;
/* Fine Grained Ticks */
var FineGrainedTicks = function (args) {
var data = [
{ x: new Date('2018-01-01T00:00:00-0800'), y: 1 },
{ x: new Date('2018-01-02T00:00:00-0800'), y: 2 },
{ x: new Date('2018-01-03T00:00:00-0800'), y: 3 },
];
var style = {
paddingTop: '5rem',
};
return (react_1.default.createElement("section", { style: style },
react_1.default.createElement(LineChart_1.default, __assign({}, args, { data: data, width: 800, xAxisTicks: lodash_1.default.map(data, 'x'), xAxisFormatter: function (date) { return date.toLocaleDateString(); } }))));
};
exports.FineGrainedTicks = FineGrainedTicks;
//# sourceMappingURL=LineChart.stories.js.map