mirror of https://github.com/Budibase/budibase.git
cmack
6 years ago
7 changed files with 560 additions and 0 deletions
@ -0,0 +1,139 @@ |
|||
<script> |
|||
import { getColorSchema, getChartGradient, notNull } from "./utils" |
|||
import britecharts from "britecharts" |
|||
import { onMount } from "svelte" |
|||
|
|||
/* |
|||
ISSUES |
|||
- Renders but seems to be a problem with tooltip hover |
|||
*/ |
|||
|
|||
import { select } from "d3-selection" |
|||
import shortid from "shortid" |
|||
|
|||
const _id = shortid.generate() |
|||
|
|||
const chart = britecharts.groupedBar() |
|||
const chartClass = `groupedbar-container-${_id}` |
|||
const legendClass = `legend-container-${_id}` |
|||
|
|||
let tooltip |
|||
let tooltipContainer |
|||
let chartElement = null |
|||
let chartContainer = null |
|||
|
|||
export let customMouseOver = () => tooltip.show() |
|||
export let customMouseMove = (dataPoint, topicColorMap, dataPointXPosition) => |
|||
tooltip.update(dataPoint, topicColorMap, dataPointXPosition) |
|||
export let customMouseOut = () => tooltip.hide() |
|||
export let customClick = 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 aspectRatio = null |
|||
export let grid = null |
|||
export let groupLabel = null |
|||
export let isAnimated = null |
|||
export let isHorizontal = null |
|||
export let nameLabel = null |
|||
export let valueLabel = null |
|||
export let valueLabelFormat = null |
|||
export let xTicks = null |
|||
export let yAxisLabel = null |
|||
export let yAxisLabelOffset = null |
|||
export let yTicks = null |
|||
export let yTickTextOffset = 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(aspectRatio)) { |
|||
chart.aspectRatio(aspectRatio) |
|||
} |
|||
if (notNull(grid)) { |
|||
chart.grid(grid) |
|||
} |
|||
if (notNull(groupLabel)) { |
|||
chart.groupLabel(groupLabel) |
|||
} |
|||
if (notNull(isAnimated)) { |
|||
chart.isAnimated(isAnimated) |
|||
} |
|||
if (notNull(isHorizontal)) { |
|||
chart.isHorizontal(isHorizontal) |
|||
} |
|||
if (notNull(nameLabel)) { |
|||
chart.nameLabel(nameLabel) |
|||
} |
|||
if (notNull(valueLabel)) { |
|||
chart.valueLabel(valueLabel) |
|||
} |
|||
if (notNull(valueLabelFormat)) { |
|||
chart.valueLabelFormat(valueLabelFormat) |
|||
} |
|||
if (notNull(xTicks)) { |
|||
chart.xTicks(xTicks) |
|||
} |
|||
if (notNull(yAxisLabel)) { |
|||
chart.yAxisLabel(yAxisLabel) |
|||
} |
|||
if (notNull(yAxisLabelOffset)) { |
|||
chart.yAxisLabelOffset(yAxisLabelOffset) |
|||
} |
|||
if (notNull(yTicks)) { |
|||
chart.yTicks(yTicks) |
|||
} |
|||
if (notNull(yTickTextOffset)) { |
|||
chart.yTickTextOffset(yTickTextOffset) |
|||
} |
|||
} |
|||
|
|||
function bindChartTooltip() { |
|||
tooltip = britecharts.miniTooltip() |
|||
tooltipContainer = select(`.${chartClass} .metadata-group`) |
|||
tooltipContainer.datum([]).call(tooltip) |
|||
} |
|||
|
|||
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> |
|||
|
|||
<div bind:this={chartElement} class={chartClass} /> |
|||
{#if useLegend} |
|||
<div class={legendClass} /> |
|||
{/if} |
|||
@ -0,0 +1,59 @@ |
|||
<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.heatmap() |
|||
const chartClass = `heatmap-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 |
|||
export let yAxisLabels = null |
|||
export let boxSize = null |
|||
|
|||
onMount(() => { |
|||
if (chart) { |
|||
chartContainer = select(`.${chartClass}`) |
|||
bindChartUIProps() |
|||
chartContainer.datum(data).call(chart) |
|||
} |
|||
}) |
|||
|
|||
function bindChartUIProps() { |
|||
if (notNull(color)) { |
|||
chart.colorSchema(colorSchema) |
|||
} |
|||
if (notNull(height)) { |
|||
chart.height(height) |
|||
} |
|||
if (notNull(width)) { |
|||
chart.width(width) |
|||
} |
|||
if (notNull(boxSize)) { |
|||
chart.boxSize(boxSize) |
|||
} |
|||
if (notNull(yAxisLabels)) { |
|||
chart.yAxisLabels(yAxisLabels) |
|||
} |
|||
} |
|||
|
|||
$: colorSchema = getColorSchema(color) |
|||
</script> |
|||
|
|||
<div bind:this={chartElement} class={chartClass} /> |
|||
{#if useLegend} |
|||
<div class={legendClass} /> |
|||
{/if} |
|||
@ -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.sparkline() |
|||
const chartClass = `sparkline-container-${_id}` |
|||
const legendClass = `legend-container-${_id}` |
|||
|
|||
let chartElement = null |
|||
let chartContainer = null |
|||
|
|||
export let data = [] |
|||
export let areaGradient = null |
|||
export let height = null |
|||
export let width = null |
|||
export let dateLabel = null |
|||
export let duration = null |
|||
export let isAnimated = null |
|||
export let lineGradient = null |
|||
export let titleText = null |
|||
export let titleTextStyle = null |
|||
export let valueLabel = null |
|||
export let useLegend = true |
|||
|
|||
onMount(() => { |
|||
if (chart) { |
|||
chartContainer = select(`.${chartClass}`) |
|||
bindChartUIProps() |
|||
chartContainer.datum(data).call(chart) |
|||
} |
|||
}) |
|||
|
|||
function bindChartUIProps() { |
|||
if (notNull(areaGradient)) { |
|||
chart.areaGradient(aGradient) |
|||
} |
|||
if (notNull(lineGradient)) { |
|||
chart.lineGradient(lGradient) |
|||
} |
|||
if (notNull(height)) { |
|||
chart.height(height) |
|||
} |
|||
if (notNull(width)) { |
|||
chart.width(width) |
|||
} |
|||
if (notNull(dateLabel)) { |
|||
chart.dateLabel(dateLabel) |
|||
} |
|||
if (notNull(duration)) { |
|||
chart.duration(duration) |
|||
} |
|||
if (notNull(isAnimated)) { |
|||
chart.isAnimated(isAnimated) |
|||
} |
|||
if (notNull(titleText)) { |
|||
chart.titleText(titleText) |
|||
} |
|||
if (notNull(titleTextStyle)) { |
|||
chart.titleTextStyle(titleTextStyle) |
|||
} |
|||
if (notNull(valueLabel)) { |
|||
chart.valueLabel(valueLabel) |
|||
} |
|||
} |
|||
|
|||
$: aGradient = getChartGradient(areaGradient) |
|||
$: lGradient = getChartGradient(lineGradient) |
|||
</script> |
|||
|
|||
<div bind:this={chartElement} class={chartClass} /> |
|||
{#if useLegend} |
|||
<div class={legendClass} /> |
|||
{/if} |
|||
Loading…
Reference in new issue