lucid-ui
Version:
A UI component library from Xandr.
127 lines • 6.6 kB
JavaScript
import React from 'react';
import * as d3Scale from 'd3-scale';
import * as d3Time from 'd3-time';
import Axis from './Axis';
export default {
title: 'Visualizations/Axis',
component: Axis,
parameters: {
docs: {
description: {
component: Axis.peek.description,
},
},
},
};
/* Basic */
export const Basic = (args) => {
const margin = { right: 40, left: 20, top: 40, bottom: 10 };
const width = 500;
const height = 100;
const innerWidth = width - margin.right - margin.left;
const x = d3Scale.scaleLinear().domain([0, 100000]).range([0, innerWidth]);
return (React.createElement("svg", { width: width, height: height },
React.createElement("g", { transform: `translate(${margin.left}, ${height / 2})` },
React.createElement(Axis, { ...args, scale: x, orient: 'bottom', tickCount: 6 }))));
};
/* Top */
export const Top = (args) => {
const margin = { right: 20, left: 20 };
const width = 400;
const height = 50;
const innerWidth = width - margin.right - margin.left;
const x = d3Scale.scaleLinear().domain([0, 100000]).range([0, innerWidth]);
return (React.createElement("svg", { width: width, height: height },
React.createElement("g", { transform: `translate(${margin.left}, ${height / 2})` },
React.createElement(Axis, { ...args, scale: x, orient: 'top', textOrientation: 'horizontal', tickCount: 6 }))));
};
/* Left */
export const Left = (args) => {
const margin = { top: 10, bottom: 10 };
const width = 50;
const height = 200;
const innerHeight = height - margin.top - margin.bottom;
const y = d3Scale.scaleLinear().domain([0, 100000]).range([innerHeight, 0]);
return (React.createElement("svg", { width: width, height: height },
React.createElement("g", { transform: `translate(${width - 1}, ${margin.top})` },
React.createElement(Axis, { ...args, scale: y, orient: 'left' }))));
};
/* Right */
export const Right = (args) => {
const margin = { top: 10, bottom: 10 };
const width = 50;
const height = 200;
const innerHeight = height - margin.top - margin.bottom;
const y = d3Scale.scaleLinear().domain([0, 50]).range([innerHeight, 0]);
return (React.createElement("svg", { width: width, height: height },
React.createElement("g", { transform: `translate(0, ${margin.top})` },
React.createElement(Axis, { ...args, scale: y, orient: 'right', textOrientation: 'horizontal' }))));
};
/* Time */
export const Time = (args) => {
const margin = { right: 10, left: 30 };
const width = 400;
const height = 200;
const innerWidth = width - margin.right - margin.left;
const x = d3Scale
.scaleTime()
.domain([new Date('2015-01-01'), new Date('2017-02-01')])
.range([0, innerWidth]);
return (React.createElement("svg", { width: width, height: height },
React.createElement("g", { transform: `translate(${margin.left}, 1)` },
React.createElement(Axis, { ...args, orient: 'bottom', scale: x })),
React.createElement("g", { transform: `translate(${margin.left}, ${(height / 3) * 1})` },
React.createElement(Axis, { ...args, orient: 'bottom', scale: x, ticks: x.ticks(d3Time.timeMonth, 6) })),
React.createElement("g", { transform: `translate(${margin.left}, ${(height / 3) * 2})` },
React.createElement(Axis, { ...args, orient: 'bottom', scale: x, ticks: x.ticks(d3Time.timeYear, 1) }))));
};
/* Ordinal */
export const Ordinal = (args) => {
const margin = { right: 20, left: 20 };
const width = 400;
const height = 40;
const innerWidth = width - margin.right - margin.left;
const x = d3Scale
.scaleBand()
.domain(['a', 'b', 'c', 'd'])
.range([0, innerWidth]);
return (React.createElement("svg", { width: width, height: height },
React.createElement("g", { transform: `translate(${margin.left}, 1)` },
React.createElement(Axis, { ...args, orient: 'bottom', scale: x }))));
};
/* Diagonal Text */
export const DiagonalText = (args) => {
// individual margin values may need to be changed to
// prevent or add extra padding depending on use of axis.
const margin = { right: 40, left: 20, top: 40, bottom: 10 };
const horizontalAxisWidth = 500;
const horizontalAxisHeight = 100;
const verticalAxisWidth = 100;
const verticalAxisHeight = 200;
const innerWidth = horizontalAxisWidth - margin.right - margin.left;
const innerHeight = verticalAxisHeight - margin.top - margin.bottom;
const x = d3Scale.scaleLinear().domain([0, 100000]).range([0, innerWidth]);
const y = d3Scale.scaleLinear().domain([0, 100000]).range([innerHeight, 0]);
return (React.createElement("div", null,
React.createElement("div", null,
React.createElement("p", null, "top"),
React.createElement("svg", { width: horizontalAxisWidth, height: horizontalAxisHeight },
React.createElement("g", { transform: `translate(${margin.left}, ${horizontalAxisHeight / 2})` },
React.createElement(Axis, { ...args, scale: x, orient: 'top', textOrientation: 'diagonal', tickCount: 6 })))),
React.createElement("div", null,
React.createElement("p", null, "bottom"),
React.createElement("svg", { width: horizontalAxisWidth, height: horizontalAxisHeight },
React.createElement("g", { transform: `translate(${margin.left}, ${horizontalAxisHeight / 2})` },
React.createElement(Axis, { ...args, scale: x, orient: 'bottom', textOrientation: 'diagonal', tickCount: 6 })))),
React.createElement("div", null,
React.createElement("p", null, "right"),
React.createElement("svg", { width: verticalAxisWidth, height: verticalAxisHeight },
React.createElement("g", { transform: `translate(0, ${margin.top})` },
React.createElement(Axis, { ...args, scale: y, orient: 'right', textOrientation: 'diagonal', tickCount: 6 })))),
React.createElement("div", null,
React.createElement("p", null, "left"),
React.createElement("svg", { width: verticalAxisWidth, height: verticalAxisHeight },
React.createElement("g", { transform: `translate(${verticalAxisWidth - 1}, ${margin.top})` },
React.createElement(Axis, { ...args, scale: y, orient: 'left', textOrientation: 'diagonal', tickCount: 6 }))))));
};
//# sourceMappingURL=Axis.stories.js.map