forked from tsai/budibase
cmack
6 years ago
10 changed files with 744 additions and 62 deletions
@ -0,0 +1,94 @@ |
|||
<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 |
|||
- Chart gradient doesn't seem to do anything |
|||
*/ |
|||
|
|||
const _id = shortid.generate() |
|||
|
|||
const chart = britecharts.brush() |
|||
const chartClass = `brush-container-${_id}` |
|||
const legendClass = `legend-container-${_id}` |
|||
|
|||
let chartElement = null |
|||
let chartContainer = null |
|||
|
|||
export let customBrushEnd = null |
|||
export let customBrushStart = null |
|||
|
|||
export let data = [] |
|||
export let gradient = null |
|||
export let height = 200 |
|||
export let width = 200 |
|||
export let margin = { top: 0, right: 0, bottom: 0, left: 0 } |
|||
|
|||
export let dateRange = null |
|||
export let locale = null |
|||
export let roundingTimeInterval = null |
|||
export let xAxisFormat = null |
|||
export let xTicks = null |
|||
export let xAxisCustomFormat = null |
|||
|
|||
onMount(() => { |
|||
if (chart) { |
|||
chartContainer = select(`.${chartClass}`) |
|||
bindChartUIProps() |
|||
bindChartEvents() |
|||
chartContainer.datum(data).call(chart) |
|||
} |
|||
}) |
|||
|
|||
function bindChartUIProps() { |
|||
if (notNull(gradient)) { |
|||
chart.gradient(chartGradient) |
|||
} |
|||
if (notNull(height)) { |
|||
chart.height(height) |
|||
} |
|||
if (notNull(width)) { |
|||
chart.width(width) |
|||
} |
|||
if (notNull(margin)) { |
|||
chart.margin(margin) |
|||
} |
|||
if (notNull(dateRange)) { |
|||
chart.dateRange(dateRange) |
|||
} |
|||
if (notNull(locale)) { |
|||
chart.locale(locale) |
|||
} |
|||
if (notNull(roundingTimeInterval)) { |
|||
chart.roundingTimeInterval(roundingTimeInterval) |
|||
} |
|||
if (notNull(xAxisFormat)) { |
|||
chart.xAxisFormat(xAxisFormat) |
|||
} |
|||
if (notNull(xTicks)) { |
|||
chart.xTicks(xTicks) |
|||
} |
|||
if (notNull(xAxisCustomFormat)) { |
|||
chart.xAxisCustomFormat(xAxisCustomFormat) |
|||
} |
|||
} |
|||
|
|||
function bindChartEvents() { |
|||
if (customBrushEnd) { |
|||
chart.on("customBrushEnd", customBrushEnd) |
|||
} |
|||
if (customBrushStart) { |
|||
chart.on("customBrushStart", customBrushStart) |
|||
} |
|||
} |
|||
|
|||
$: chartGradient = getChartGradient(gradient) |
|||
$: console.log(chartGradient) |
|||
</script> |
|||
|
|||
<div bind:this={chartElement} class={chartClass} /> |
|||
@ -0,0 +1,79 @@ |
|||
<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.bullet() |
|||
const chartClass = `bullet-container-${_id}` |
|||
const legendClass = `legend-container-${_id}` |
|||
|
|||
let chartElement = null |
|||
let chartContainer = null |
|||
|
|||
export let data = [] |
|||
export let aspectRatio = null |
|||
export let color = "britecharts" |
|||
export let customSubtitle = null |
|||
export let customTitle = null |
|||
export let numberFormat = null |
|||
export let paddingBetweenAxisAndChart = null |
|||
export let startMaxRangeOpacity = null |
|||
export let ticks = null |
|||
export let isReverse = false |
|||
export let height = 200 |
|||
export let width = 200 |
|||
export let margin = { top: 0, right: 0, bottom: 0, left: 0 } |
|||
|
|||
onMount(() => { |
|||
if (chart) { |
|||
chartContainer = select(`.${chartClass}`) |
|||
bindChartUIProps() |
|||
chartContainer.datum(data).call(chart) |
|||
} |
|||
}) |
|||
|
|||
function bindChartUIProps() { |
|||
if (notNull(color)) { |
|||
chart.colorSchema(colorSchema) |
|||
} |
|||
if (notNull(aspectRatio)) { |
|||
chart.aspectRatio(aspectRatio) |
|||
} |
|||
if (notNull(customSubtitle)) { |
|||
chart.customSubtitle(customSubtitle) |
|||
} |
|||
if (notNull(customTitle)) { |
|||
chart.customTitle(customTitle) |
|||
} |
|||
if (notNull(numberFormat)) { |
|||
chart.numberFormat(numberFormat) |
|||
} |
|||
if (notNull(paddingBetweenAxisAndChart)) { |
|||
chart.paddingBetweenAxisAndChart(paddingBetweenAxisAndChart) |
|||
} |
|||
if (notNull(startMaxRangeOpacity)) { |
|||
chart.startMaxRangeOpacity(startMaxRangeOpacity) |
|||
} |
|||
if (notNull(ticks)) { |
|||
chart.ticks(ticks) |
|||
} |
|||
if (notNull(isReverse)) { |
|||
chart.isReverse(isReverse) |
|||
} |
|||
if (notNull(height)) { |
|||
chart.height(height) |
|||
} |
|||
if (notNull(width)) { |
|||
chart.width(width) |
|||
} |
|||
} |
|||
|
|||
$: colorSchema = getColorSchema(color) |
|||
</script> |
|||
|
|||
<div bind:this={chartElement} class={chartClass} /> |
|||
@ -1,36 +1,129 @@ |
|||
<script> |
|||
import Chart, { getColorSchema } from "./Chart.svelte" |
|||
import { getColorSchema, notNull } from "./utils.js" |
|||
import britecharts from "britecharts" |
|||
import { onMount } from "svelte" |
|||
|
|||
let type = "donut" |
|||
import { select } from "d3-selection" |
|||
import shortid from "shortid" |
|||
|
|||
const _id = shortid.generate() |
|||
|
|||
const chart = britecharts.donut() |
|||
const chartClass = `donut-container-${_id}` |
|||
const legendClass = `legend-container-${_id}` |
|||
|
|||
let chartElement = null |
|||
let chartContainer = null |
|||
|
|||
export let customMouseOver = null |
|||
export let customMouseMove = null |
|||
export let customMouseOut = null |
|||
export let customClick = null |
|||
|
|||
export let orderingFunction = null |
|||
|
|||
export let data = [] |
|||
export let color = "britecharts" |
|||
export let height = 200 |
|||
export let width = 200 |
|||
export let margin = { top: 0, right: 0, bottom: 0, left: 0 } |
|||
export let margin = null |
|||
|
|||
export let centeredTextFunction = null |
|||
export let externalRadius = 25 |
|||
export let percentageFormat = null |
|||
export let hasFixedHighlightedSlice = false |
|||
export let hasLastHoverSliceHighlighted = false |
|||
export let hasHoverAnimation = true |
|||
export let highlightSliceById = null |
|||
export let numberFormat = null |
|||
export let internalRadius = 25 |
|||
export let isAnimated = true |
|||
export let radiusHoverOffset = 0 |
|||
export let useLegend = true |
|||
|
|||
onMount(() => { |
|||
if (chart) { |
|||
chart.emptyDataConfig({ |
|||
showEmptySlice: true, |
|||
emptySliceColor: "#000000", |
|||
}) |
|||
chartContainer = select(`.${chartClass}`) |
|||
bindChartUIProps() |
|||
bindChartEvents() |
|||
chartContainer.datum(data).call(chart) |
|||
} |
|||
}) |
|||
|
|||
function bindChartUIProps() { |
|||
if (notNull(color)) { |
|||
chart.colorSchema(getColorSchema(color)) |
|||
} |
|||
if (notNull(height)) { |
|||
chart.height(height) |
|||
} |
|||
if (notNull(width)) { |
|||
chart.width(width) |
|||
} |
|||
if (notNull(margin)) { |
|||
chart.margin(margin) |
|||
} |
|||
if (notNull(centeredTextFunction)) { |
|||
chart.centeredTextFunction(centeredTextFunction) |
|||
} |
|||
if (notNull(externalRadius)) { |
|||
chart.externalRadius(externalRadius) |
|||
} |
|||
if (notNull(percentageFormat)) { |
|||
chart.percentageFormat(percentageFormat) |
|||
} |
|||
if (notNull(hasFixedHighlightedSlice)) { |
|||
chart.hasFixedHighlightedSlice(hasFixedHighlightedSlice) |
|||
} |
|||
if (notNull(hasLastHoverSliceHighlighted)) { |
|||
chart.hasLastHoverSliceHighlighted(hasLastHoverSliceHighlighted) |
|||
} |
|||
if (notNull(hasHoverAnimation)) { |
|||
chart.hasHoverAnimation(hasHoverAnimation) |
|||
} |
|||
if (notNull(highlightSliceById)) { |
|||
chart.highlightSliceById(highlightSliceById) |
|||
} |
|||
if (notNull(numberFormat)) { |
|||
chart.numberFormat(numberFormat) |
|||
} |
|||
if (notNull(internalRadius)) { |
|||
chart.internalRadius(internalRadius) |
|||
} |
|||
if (notNull(isAnimated)) { |
|||
chart.isAnimated(isAnimated) |
|||
} |
|||
if (notNull(radiusHoverOffset)) { |
|||
chart.radiusHoverOffset(radiusHoverOffset) |
|||
} |
|||
if (notNull(orderingFunction)) { |
|||
chart.orderingFunction(orderingFunction) |
|||
} |
|||
} |
|||
|
|||
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) |
|||
} |
|||
} |
|||
|
|||
$: colorSchema = getColorSchema(color) |
|||
</script> |
|||
|
|||
<Chart |
|||
{type} |
|||
{useLegend} |
|||
{data} |
|||
{colorSchema} |
|||
{height} |
|||
{width} |
|||
{margin} |
|||
{externalRadius} |
|||
{hasFixedHighlightedSlice} |
|||
{hasLastHoverSliceHighlighted} |
|||
{internalRadius} |
|||
{isAnimated} |
|||
{radiusHoverOffset} /> |
|||
<div bind:this={chartElement} class={chartClass} /> |
|||
{#if useLegend} |
|||
<div class={legendClass} /> |
|||
{/if} |
|||
|
|||
@ -0,0 +1,39 @@ |
|||
<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.chartname() |
|||
const chartClass = `donut-container-${_id}` |
|||
const legendClass = `legend-container-${_id}` |
|||
|
|||
let chartElement = null |
|||
let chartContainer = null |
|||
|
|||
export let data = [] |
|||
export let color = "britecharts" |
|||
export let height = 200 |
|||
export let width = 200 |
|||
export let margin = { top: 0, right: 0, bottom: 0, left: 0 } |
|||
export let useLegend = true |
|||
|
|||
onMount(() => { |
|||
if (chart) { |
|||
chartContainer = select(`.${chartClass}`) |
|||
bindChartUIProps() |
|||
bindChartEvents() |
|||
chartContainer.datum(data).call(chart) |
|||
bindChartTooltip() |
|||
} |
|||
}) |
|||
</script> |
|||
|
|||
<div bind:this={chartElement} class={chartClass} /> |
|||
{#if useLegend} |
|||
<div class={legendClass} /> |
|||
{/if} |
|||
@ -1,3 +1,6 @@ |
|||
export { default as donut } from "./Donut.svelte" |
|||
export { default as bar } from "./Bar.svelte" |
|||
export { default as line } from "./Line.svelte" |
|||
export { default as brush } from "./Brush.svelte" |
|||
export { default as bullet } from "./Bullet.svelte" |
|||
|
|||
|
|||
@ -0,0 +1,19 @@ |
|||
import britecharts from "britecharts" |
|||
|
|||
export const notNull = value => value || value === false |
|||
|
|||
export const chartTypes = britecharts ? Object.keys(britecharts) : null |
|||
|
|||
//expose chart color schemas for use or reference outside compnent
|
|||
export const colorSchemas = britecharts ? britecharts.colors.colorSchemas : null |
|||
|
|||
//export color gradients for use or reference outside the component
|
|||
export const colorGradients = britecharts |
|||
? britecharts.colors.colorGradients |
|||
: null |
|||
|
|||
export const getColorSchema = color => |
|||
color ? colorSchemas[color] : colorSchemas["britecharts"] |
|||
|
|||
export const getChartGradient = gradient => |
|||
gradient ? colorGradients[gradient] : null |
|||
Loading…
Reference in new issue