forked from tsai/budibase
cmack
6 years ago
7 changed files with 1120 additions and 0 deletions
@ -0,0 +1,163 @@ |
|||||
|
<script> |
||||
|
import { getColorSchema, getChartGradient, notNull } from "./utils" |
||||
|
import britecharts from "britecharts" |
||||
|
import { onMount } from "svelte" |
||||
|
|
||||
|
import { select } from "d3-selection" |
||||
|
import shortid from "shortid" |
||||
|
|
||||
|
const _id = shortid.generate() |
||||
|
|
||||
|
const chart = britecharts.scatterPlot() |
||||
|
const chartClass = `scatterplot-container-${_id}` |
||||
|
const legendClass = `legend-container-${_id}` |
||||
|
|
||||
|
let chartElement = null |
||||
|
let chartContainer = null |
||||
|
let tooltip |
||||
|
let tooltipContainer |
||||
|
|
||||
|
export let customClick = null |
||||
|
export let customMouseOut = () => tooltip.hide() |
||||
|
export let customMouseOver = () => tooltip.show() |
||||
|
export let customMouseMove = ( |
||||
|
dataPoint, |
||||
|
colorMapping, |
||||
|
xPosition, |
||||
|
yPosition = null |
||||
|
) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null)) |
||||
|
|
||||
|
export let data = [] |
||||
|
export let color = "britecharts" |
||||
|
export let height = null |
||||
|
export let width = null |
||||
|
export let margin = null |
||||
|
export let aspectRatio = null |
||||
|
export let circleOpacity = null |
||||
|
export let grid = null |
||||
|
export let hasCrossHairs = null |
||||
|
export let hasHollowCircles = null |
||||
|
export let hasTrendline = null |
||||
|
export let highlightTextLegendOffset = null |
||||
|
export let isAnimated = null |
||||
|
export let maxCircleArea = null |
||||
|
export let xAxisFormat = null |
||||
|
export let xAxisLabel = null |
||||
|
export let xAxisLabelOffset = null |
||||
|
export let xTicks = null |
||||
|
export let yAxisFormat = null |
||||
|
export let yAxisLabel = null |
||||
|
export let yAxisLabelOffset = null |
||||
|
export let yTicks = null |
||||
|
export let useLegend = true |
||||
|
|
||||
|
onMount(() => { |
||||
|
if (chart) { |
||||
|
chartContainer = select(`.${chartClass}`) |
||||
|
bindChartUIProps() |
||||
|
bindChartEvents() |
||||
|
chartContainer.datum(data).call(chart) |
||||
|
bindChartTooltip() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
function bindChartUIProps() { |
||||
|
if (notNull(color)) { |
||||
|
chart.colorSchema(colorSchema) |
||||
|
} |
||||
|
if (notNull(height)) { |
||||
|
chart.height(height) |
||||
|
} |
||||
|
if (notNull(width)) { |
||||
|
chart.width(width) |
||||
|
} |
||||
|
if (notNull(margin)) { |
||||
|
chart.width(margin) |
||||
|
} |
||||
|
if (notNull(aspectRatio)) { |
||||
|
chart.aspectRatio(aspectRatio) |
||||
|
} |
||||
|
if (notNull(circleOpacity)) { |
||||
|
chart.circleOpacity(circleOpacity) |
||||
|
} |
||||
|
if (notNull(grid)) { |
||||
|
chart.grid(grid) |
||||
|
} |
||||
|
if (notNull(hasCrossHairs)) { |
||||
|
chart.hasCrossHairs(hasCrossHairs) |
||||
|
} |
||||
|
if (notNull(hasHollowCircles)) { |
||||
|
chart.hasHollowCircles(hasHollowCircles) |
||||
|
} |
||||
|
if (notNull(hasTrendline)) { |
||||
|
chart.hasTrendline(hasTrendline) |
||||
|
} |
||||
|
if (notNull(highlightTextLegendOffset)) { |
||||
|
chart.highlightTextLegendOffset(highlightTextLegendOffset) |
||||
|
} |
||||
|
if (notNull(isAnimated)) { |
||||
|
chart.isAnimated(isAnimated) |
||||
|
} |
||||
|
if (notNull(maxCircleArea)) { |
||||
|
chart.maxCircleArea(maxCircleArea) |
||||
|
} |
||||
|
if (notNull(xAxisFormat)) { |
||||
|
chart.xAxisFormat(xAxisFormat) |
||||
|
} |
||||
|
if (notNull(xAxisLabel)) { |
||||
|
chart.xAxisLabel(xAxisLabel) |
||||
|
} |
||||
|
if (notNull(xAxisLabelOffset)) { |
||||
|
chart.xAxisLabelOffset(xAxisLabelOffset) |
||||
|
} |
||||
|
if (notNull(xTicks)) { |
||||
|
chart.xTicks(xTicks) |
||||
|
} |
||||
|
if (notNull(yAxisFormat)) { |
||||
|
chart.yAxisFormat(yAxisFormat) |
||||
|
} |
||||
|
if (notNull(yAxisLabel)) { |
||||
|
chart.yAxisLabel(yAxisLabel) |
||||
|
} |
||||
|
if (notNull(yAxisLabelOffset)) { |
||||
|
chart.yAxisLabelOffset(yAxisLabelOffset) |
||||
|
} |
||||
|
if (notNull(yTicks)) { |
||||
|
chart.yTicks(yTicks) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function bindChartEvents() { |
||||
|
if (customClick) { |
||||
|
chart.on("customClick", customClick) |
||||
|
} |
||||
|
if (customMouseMove) { |
||||
|
chart.on("customMouseMove", customMouseMove) |
||||
|
} |
||||
|
if (customMouseOut) { |
||||
|
chart.on("customMouseOut", customMouseOut) |
||||
|
} |
||||
|
if (customMouseOver) { |
||||
|
chart.on("customMouseOver", customMouseOver) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function bindChartTooltip() { |
||||
|
//TODO: May be more apt to use tooltip() here. Currently erroring however |
||||
|
tooltip = britecharts.miniTooltip() |
||||
|
tooltipContainer = select(`.${chartClass} .metadata-group`) |
||||
|
// tooltip |
||||
|
// .title("Temperature") |
||||
|
// .valueLabel("y") |
||||
|
// .nameLabel("x") |
||||
|
// .numberFormat("$") |
||||
|
tooltipContainer.datum([]).call(tooltip) |
||||
|
} |
||||
|
|
||||
|
$: colorSchema = getColorSchema(color) |
||||
|
</script> |
||||
|
|
||||
|
<div bind:this={chartElement} class={chartClass} /> |
||||
|
{#if useLegend} |
||||
|
<div class={legendClass} /> |
||||
|
{/if} |
||||
@ -0,0 +1,157 @@ |
|||||
|
<script> |
||||
|
import { getColorSchema, getChartGradient, notNull } from "./utils" |
||||
|
import britecharts from "britecharts" |
||||
|
import { onMount } from "svelte" |
||||
|
|
||||
|
import { select } from "d3-selection" |
||||
|
import shortid from "shortid" |
||||
|
|
||||
|
const _id = shortid.generate() |
||||
|
|
||||
|
const chart = britecharts.stackedArea() |
||||
|
const chartClass = `stackedarea-container-${_id}` |
||||
|
const legendClass = `legend-container-${_id}` |
||||
|
|
||||
|
let chartElement = null |
||||
|
let chartContainer = null |
||||
|
|
||||
|
export let customMouseOver = () => tooltip.show() |
||||
|
export let customMouseMove = ( |
||||
|
dataPoint, |
||||
|
colorMapping, |
||||
|
xPosition, |
||||
|
yPosition = null |
||||
|
) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null)) |
||||
|
export let customMouseOut = () => tooltip.hide() |
||||
|
|
||||
|
export let data = [] |
||||
|
export let color = "britecharts" |
||||
|
export let height = null |
||||
|
export let width = null |
||||
|
export let margin = null |
||||
|
export let areaCurve = null |
||||
|
export let areaOpacity = null |
||||
|
export let aspectRatio = null |
||||
|
export let dateLabel = null |
||||
|
export let grid = null |
||||
|
export let isAnimated = null |
||||
|
export let keyLabel = null |
||||
|
export let locale = null |
||||
|
export let tooltipThreshold = null |
||||
|
export let topicsOrder = null |
||||
|
export let valueLabel = null |
||||
|
export let xAxisCustomFormat = null |
||||
|
export let xAxisFormat = null |
||||
|
export let xAxisScale = null |
||||
|
export let xAxisValueType = null |
||||
|
export let xTicks = null |
||||
|
export let yAxisBaseline = null |
||||
|
export let yAxisLabel = null |
||||
|
export let yAxisLabelOffset = null |
||||
|
export let yTicks = null |
||||
|
export let useLegend = true |
||||
|
|
||||
|
onMount(() => { |
||||
|
if (chart) { |
||||
|
chartContainer = select(`.${chartClass}`) |
||||
|
bindChartUIProps() |
||||
|
bindChartEvents() |
||||
|
chartContainer.datum(data).call(chart) |
||||
|
bindChartTooltip() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
function bindChartUIProps() { |
||||
|
if (notNull(color)) { |
||||
|
chart.colorSchema(colorSchema) |
||||
|
} |
||||
|
if (notNull(height)) { |
||||
|
chart.height(height) |
||||
|
} |
||||
|
if (notNull(width)) { |
||||
|
chart.width(width) |
||||
|
} |
||||
|
if (notNull(margin)) { |
||||
|
chart.margin(margin) |
||||
|
} |
||||
|
if (notNull(areaCurve)) { |
||||
|
chart.areaCurve(areaCurve) |
||||
|
} |
||||
|
if (notNull(areaOpacity)) { |
||||
|
chart.areaOpacity(areaOpacity) |
||||
|
} |
||||
|
if (notNull(aspectRatio)) { |
||||
|
chart.aspectRatio(aspectRatio) |
||||
|
} |
||||
|
if (notNull(dateLabel)) { |
||||
|
chart.dateLabel(dateLabel) |
||||
|
} |
||||
|
if (notNull(grid)) { |
||||
|
chart.grid(grid) |
||||
|
} |
||||
|
if (notNull(isAnimated)) { |
||||
|
chart.isAnimated(isAnimated) |
||||
|
} |
||||
|
if (notNull(keyLabel)) { |
||||
|
chart.keyLabel(keyLabel) |
||||
|
} |
||||
|
if (notNull(locale)) { |
||||
|
chart.locale(locale) |
||||
|
} |
||||
|
if (notNull(tooltipThreshold)) { |
||||
|
chart.tooltipThreshold(tooltipThreshold) |
||||
|
} |
||||
|
if (notNull(topicsOrder)) { |
||||
|
chart.topicsOrder(topicsOrder) |
||||
|
} |
||||
|
if (notNull(valueLabel)) { |
||||
|
chart.valueLabel(valueLabel) |
||||
|
} |
||||
|
if (notNull(xAxisCustomFormat)) { |
||||
|
chart.xAxisCustomFormat(xAxisCustomFormat) |
||||
|
} |
||||
|
if (notNull(xAxisFormat)) { |
||||
|
chart.xAxisFormat(xAxisFormat) |
||||
|
} |
||||
|
if (notNull(xAxisScale)) { |
||||
|
chart.xAxisScale(xAxisScale) |
||||
|
} |
||||
|
if (notNull(xAxisValueType)) { |
||||
|
chart.xAxisValueType(xAxisValueType) |
||||
|
} |
||||
|
if (notNull(xTicks)) { |
||||
|
chart.xTicks(xTicks) |
||||
|
} |
||||
|
if (notNull(yAxisBaseline)) { |
||||
|
chart.yAxisBaseline(yAxisBaseline) |
||||
|
} |
||||
|
if (notNull(yAxisLabel)) { |
||||
|
chart.yAxisLabel(yAxisLabel) |
||||
|
} |
||||
|
if (notNull(yAxisLabelOffset)) { |
||||
|
chart.yAxisLabelOffset(yAxisLabelOffset) |
||||
|
} |
||||
|
if (notNull(yTicks)) { |
||||
|
chart.yTicks(yTicks) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function bindChartEvents() { |
||||
|
if (customMouseMove) { |
||||
|
chart.on("customMouseMove", customMouseMove) |
||||
|
} |
||||
|
if (customMouseOut) { |
||||
|
chart.on("customMouseOut", customMouseOut) |
||||
|
} |
||||
|
if (customMouseOver) { |
||||
|
chart.on("customMouseOver", customMouseOver) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
$: colorSchema = getColorSchema(color) |
||||
|
</script> |
||||
|
|
||||
|
<div bind:this={chartElement} class={chartClass} /> |
||||
|
{#if useLegend} |
||||
|
<div class={legendClass} /> |
||||
|
{/if} |
||||
@ -0,0 +1,152 @@ |
|||||
|
<script> |
||||
|
import { getColorSchema, getChartGradient, notNull } from "./utils" |
||||
|
import britecharts from "britecharts" |
||||
|
import { onMount } from "svelte" |
||||
|
|
||||
|
import { select } from "d3-selection" |
||||
|
import shortid from "shortid" |
||||
|
|
||||
|
const _id = shortid.generate() |
||||
|
|
||||
|
const chart = britecharts.stackedBar() |
||||
|
const chartClass = `stackedbar-container-${_id}` |
||||
|
const legendClass = `legend-container-${_id}` |
||||
|
|
||||
|
let chartElement = null |
||||
|
let chartContainer = null |
||||
|
let tooltip |
||||
|
let tooltipContainer |
||||
|
|
||||
|
export let customMouseOver = () => tooltip.show() |
||||
|
export let customMouseMove = (dataPoint, colorMapping, xPosition) => |
||||
|
tooltip.update(dataPoint, colorMapping, xPosition) |
||||
|
export let customMouseOut = () => tooltip.hide() |
||||
|
|
||||
|
export let data = [] |
||||
|
export let color = "britecharts" |
||||
|
export let height = null |
||||
|
export let width = null |
||||
|
export let margin = null |
||||
|
export let aspectRatio = null |
||||
|
export let betweenBarsPadding = null |
||||
|
export let grid = null |
||||
|
export let hasPercentage = null |
||||
|
export let hasReversedStacks = null |
||||
|
export let isAnimated = null |
||||
|
export let isHorizontal = null |
||||
|
export let locale = null |
||||
|
export let nameLabel = null |
||||
|
export let percentageAxisToMaxRatio = null |
||||
|
export let stackLabel = null |
||||
|
export let valueLabel = null |
||||
|
export let valueLabelFormat = null |
||||
|
export let xTicks = null |
||||
|
export let yTicks = null |
||||
|
export let yAxisLabel = null |
||||
|
export let yAxisLabelOffset = null |
||||
|
export let useLegend = true |
||||
|
|
||||
|
onMount(() => { |
||||
|
if (chart) { |
||||
|
chartContainer = select(`.${chartClass}`) |
||||
|
bindChartUIProps() |
||||
|
bindChartEvents() |
||||
|
chartContainer.datum(data).call(chart) |
||||
|
// bindChartTooltip() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
function bindChartUIProps() { |
||||
|
//UI PROPS |
||||
|
if (notNull(color)) { |
||||
|
chart.colorSchema(colorSchema) |
||||
|
} |
||||
|
if (notNull(height)) { |
||||
|
chart.height(height) |
||||
|
} |
||||
|
if (notNull(width)) { |
||||
|
chart.width(width) |
||||
|
} |
||||
|
if (notNull(margin)) { |
||||
|
chart.margin(margin) |
||||
|
} |
||||
|
if (notNull(aspectRatio)) { |
||||
|
chart.aspectRatio(aspectRatio) |
||||
|
} |
||||
|
if (notNull(betweenBarsPadding)) { |
||||
|
chart.betweenBarsPadding(betweenBarsPadding) |
||||
|
} |
||||
|
if (notNull(grid)) { |
||||
|
chart.grid(grid) |
||||
|
} |
||||
|
if (notNull(hasPercentage)) { |
||||
|
chart.hasPercentage(hasPercentage) |
||||
|
} |
||||
|
if (notNull(hasReversedStacks)) { |
||||
|
chart.hasReversedStacks(hasReversedStacks) |
||||
|
} |
||||
|
if (notNull(isAnimated)) { |
||||
|
chart.isAnimated(isAnimated) |
||||
|
} |
||||
|
if (notNull(isHorizontal)) { |
||||
|
chart.isHorizontal(isHorizontal) |
||||
|
} |
||||
|
if (notNull(locale)) { |
||||
|
chart.locale(locale) |
||||
|
} |
||||
|
if (notNull(nameLabel)) { |
||||
|
chart.nameLabel(nameLabel) |
||||
|
} |
||||
|
if (notNull(percentageAxisToMaxRatio)) { |
||||
|
chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio) |
||||
|
} |
||||
|
if (notNull(stackLabel)) { |
||||
|
chart.stackLabel(stackLabel) |
||||
|
} |
||||
|
if (notNull(valueLabel)) { |
||||
|
chart.valueLabel(valueLabel) |
||||
|
} |
||||
|
if (notNull(valueLabelFormat)) { |
||||
|
chart.valueLabelFormat(valueLabelFormat) |
||||
|
} |
||||
|
if (notNull(xTicks)) { |
||||
|
chart.xTicks(xTicks) |
||||
|
} |
||||
|
if (notNull(yTicks)) { |
||||
|
chart.yTicks(yTicks) |
||||
|
} |
||||
|
if (notNull(yAxisLabel)) { |
||||
|
chart.yAxisLabel(yAxisLabel) |
||||
|
} |
||||
|
if (notNull(yAxisLabelOffset)) { |
||||
|
chart.yAxisLabelOffset(yAxisLabelOffset) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function bindChartEvents() { |
||||
|
if (customMouseMove) { |
||||
|
chart.on("customMouseMove", customMouseMove) |
||||
|
} |
||||
|
if (customMouseOut) { |
||||
|
chart.on("customMouseOut", customMouseOut) |
||||
|
} |
||||
|
if (customMouseOver) { |
||||
|
chart.on("customMouseOver", customMouseOver) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function bindChartTooltip() { |
||||
|
tooltip = britecharts.tooltip() |
||||
|
// tooltip.topicLabel("Hi Im the topic") |
||||
|
// tooltip.topicsOrder(["x", "y"]) |
||||
|
tooltipContainer = select(`.${chartClass} .metadata-group`) |
||||
|
tooltipContainer.datum([]).call(tooltip) |
||||
|
} |
||||
|
|
||||
|
$: colorSchema = getColorSchema(color) |
||||
|
</script> |
||||
|
|
||||
|
<div bind:this={chartElement} class={chartClass} /> |
||||
|
{#if useLegend} |
||||
|
<div class={legendClass} /> |
||||
|
{/if} |
||||
@ -0,0 +1,105 @@ |
|||||
|
<script> |
||||
|
import { getColorSchema, getChartGradient, notNull } from "./utils" |
||||
|
import britecharts from "britecharts" |
||||
|
import { onMount } from "svelte" |
||||
|
|
||||
|
import { select } from "d3-selection" |
||||
|
import shortid from "shortid" |
||||
|
|
||||
|
/* |
||||
|
ISSUES - Doesn't seem to allow color change. Chart is colored black by default |
||||
|
*/ |
||||
|
|
||||
|
const _id = shortid.generate() |
||||
|
|
||||
|
const chart = britecharts.step() |
||||
|
const chartClass = `step-container-${_id}` |
||||
|
const legendClass = `legend-container-${_id}` |
||||
|
|
||||
|
let chartElement = null |
||||
|
let chartContainer = null |
||||
|
let tooltip |
||||
|
let tooltipContainer |
||||
|
|
||||
|
export let customMouseOver = () => tooltip.show() |
||||
|
export let customMouseMove = ( |
||||
|
dataPoint, |
||||
|
colorMapping, |
||||
|
xPosition, |
||||
|
yPosition = null |
||||
|
) => tooltip.update(dataPoint, colorMapping, xPosition, (yPosition = null)) |
||||
|
export let customMouseOut = () => tooltip.hide() |
||||
|
|
||||
|
export let data = [] |
||||
|
export let height = null |
||||
|
export let width = null |
||||
|
export let margin = null |
||||
|
export let xAxisLabel = null |
||||
|
export let xAxisLabelOffset = null |
||||
|
export let yAxisLabel = null |
||||
|
export let yAxisLabelOffset = null |
||||
|
export let yTicks = null |
||||
|
export let useLegend = true |
||||
|
|
||||
|
onMount(() => { |
||||
|
if (chart) { |
||||
|
chartContainer = select(`.${chartClass}`) |
||||
|
bindChartUIProps() |
||||
|
bindChartEvents() |
||||
|
chartContainer.datum(data).call(chart) |
||||
|
bindChartTooltip() |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
function bindChartUIProps() { |
||||
|
if (notNull(height)) { |
||||
|
chart.height(height) |
||||
|
} |
||||
|
if (notNull(width)) { |
||||
|
chart.width(width) |
||||
|
} |
||||
|
if (notNull(margin)) { |
||||
|
chart.margin(margin) |
||||
|
} |
||||
|
if (notNull(xAxisLabel)) { |
||||
|
chart.xAxisLabel(xAxisLabel) |
||||
|
} |
||||
|
if (notNull(xAxisLabelOffset)) { |
||||
|
chart.xAxisLabelOffset(xAxisLabelOffset) |
||||
|
} |
||||
|
if (notNull(yAxisLabel)) { |
||||
|
chart.yAxisLabel(yAxisLabel) |
||||
|
} |
||||
|
if (notNull(yAxisLabelOffset)) { |
||||
|
chart.yAxisLabelOffset(yAxisLabelOffset) |
||||
|
} |
||||
|
if (notNull(yTicks)) { |
||||
|
chart.yTicks(yTicks) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function bindChartEvents() { |
||||
|
if (customMouseMove) { |
||||
|
chart.on("customMouseMove", customMouseMove) |
||||
|
} |
||||
|
if (customMouseOut) { |
||||
|
chart.on("customMouseOut", customMouseOut) |
||||
|
} |
||||
|
if (customMouseOver) { |
||||
|
chart.on("customMouseOver", customMouseOver) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function bindChartTooltip() { |
||||
|
tooltip = britecharts.miniTooltip() |
||||
|
tooltipContainer = select(`.${chartClass} .metadata-group`) |
||||
|
tooltipContainer.datum([]).call(tooltip) |
||||
|
} |
||||
|
|
||||
|
$: colorSchema = getColorSchema(color) |
||||
|
</script> |
||||
|
|
||||
|
<div bind:this={chartElement} class={chartClass} /> |
||||
|
{#if useLegend} |
||||
|
<div class={legendClass} /> |
||||
|
{/if} |
||||
Loading…
Reference in new issue