MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #525 from Budibase/britechart/donut-demo 

Donut Chart for the demo
This commit is contained in:
Conor_Mack 2020-08-10 14:29:52 +01:00 committed by GitHub
parent d0c9a14723 46772d6b8c
commit c8f660444f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
31 changed files with 2703 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/package.json
View File

@ -61,9 +61,11 @@
"@budibase/client": "^0.1.1",
"@budibase/colorpicker": "^1.0.1",
"@nx-js/compiler-util": "^2.0.0",
"britecharts": "^2.16.0",
"@sentry/browser": "5.19.1",
"@svelteschool/svelte-forms": "^0.7.0",
"codemirror": "^5.51.0",
"d3-selection": "^1.4.1",
"date-fns": "^1.29.0",
"deepmerge": "^4.2.2",
"feather-icons": "^4.21.0",
@ -73,7 +75,7 @@
"mustache": "^4.0.1",
"posthog-js": "^1.3.1",
"safe-buffer": "^5.1.2",
"shortid": "^2.2.8",
"shortid": "^2.2.15",
"string_decoder": "^1.2.0",
"svelte-portal": "^0.1.0",
"svelte-simple-modal": "^0.4.2",

4
packages/builder/src/builderStore/store/index.js
View File

@ -255,7 +255,7 @@ const setCurrentPage = store => pageName => {
* @param {string} componentToAdd - name of the component to add to the application
* @param {string} presetName - name of the component preset if defined
*/
const addChildComponent = store => (componentToAdd, presetName) => {
const addChildComponent = store => (componentToAdd, presetProps = {}) => {
store.update(state => {
function findSlot(component_array) {
for (let i = 0; i < component_array.length; i += 1) {
@ -278,8 +278,6 @@ const addChildComponent = store => (componentToAdd, presetName) => {
const component = getComponentDefinition(state, componentToAdd)
const presetProps = presetName ? component.presets[presetName] : {}
const instanceId = get(backendUiStore).selectedDatabase._id
const instanceName = get_capitalised_name(componentToAdd)

14
packages/builder/src/components/common/Checkbox.svelte
View File

@ -12,22 +12,24 @@
</script>
<input type="checkbox" class="checkbox" id="_checkbox" />
<label for="_checkbox" class:checked on:click={handleChange}>
<div on:click={handleChange}>
<div class="check-div" class:checked>
<div class="tick_mark" />
</label>
</div>
</div>
<style>
.checkbox {
display: none;
}
label {
.check-div {
position: relative;
width: 20px;
height: 20px;
/* background-color: #5e17e9; */
background-color: var(--grey-2);
transform: translateY(-50%);
/* transform: translateY(-50%); */
cursor: pointer;
transition: 0.2s ease transform, 0.2s ease background-color,
0.2s ease box-shadow;
@ -36,7 +38,7 @@
border-radius: 4px;
}
label:before {
.check-div:before {
content: "";
position: absolute;
top: 50%;
@ -51,7 +53,7 @@
border-radius: 2px;
}
label:active {
.check-div:active {
transform: translateY(-50%) scale(0.9);
}

1
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View File

@ -143,6 +143,7 @@
margin-top: 16px;
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
}
.instance-name {

2
packages/builder/src/components/userInterface/ComponentSelectionList.svelte
View File

@ -32,7 +32,7 @@
let selectedCategory = categories[0]
const onComponentChosen = component => {
store.addChildComponent(component._component)
store.addChildComponent(component._component, component.presetProps)
toggleTab("Navigate")

1
packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
View File

@ -30,6 +30,7 @@
</script>
<div class="root">
{#each screens as screen}
<div
class="budibase__nav-item screen-header-row"

2
packages/builder/src/components/userInterface/DesignView.svelte
View File

@ -24,7 +24,7 @@
{ value: "active", text: "Active" },
]
$: propertyGroupNames = Object.keys(panelDefinition)
$: propertyGroupNames = panelDefinition ? Object.keys(panelDefinition) : []
</script>
<div class="design-view-container">

17
packages/builder/src/components/userInterface/PropertyControl.svelte
View File

@ -9,15 +9,16 @@
export let onChange = () => {}
function handleChange(key, v) {
if (v.target) {
let val = props.valueKey ? v.target[props.valueKey] : v.target.value
onChange(key, val)
} else if (v.detail) {
onChange(key, v.detail)
} else {
onChange(key, v)
let innerVal = v
if (typeof v === "object") {
if ("detail" in v) {
innerVal = v.detail
} else if ("target" in v) {
innerVal = props.valueKey ? v.target[props.valueKey] : v.target.value
}
}
onChange(key, innerVal)
}
const safeValue = () => {
return value === undefined && props.defaultValue !== undefined
@ -47,6 +48,7 @@
.property-control {
display: flex;
flex-flow: row;
width: 260px;
margin: 8px 0px;
align-items: center;
}
@ -56,6 +58,7 @@
align-items: center;
font-size: 12px;
font-weight: 400;
width: 100px;
text-align: left;
color: var(--ink);
margin-right: auto;

140
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -4,6 +4,11 @@ import Checkbox from "../common/Checkbox.svelte"
import ModelSelect from "components/userInterface/ModelSelect.svelte"
import { all } from "./propertyCategories.js"
/*
{ label: "N/A ", value: "N/A" },
{ label: "Flex", value: "flex" },
{ label: "Inline Flex", value: "inline-flex" },
*/
export default {
categories: [
@ -425,37 +430,132 @@ export default {
],
},
{
name: "Chart",
_component: "@budibase/standard-components/datachart",
description: "Shiny chart",
icon: "ri-bar-chart-line",
name: "Donut Chart",
_component: "@budibase/standard-components/donut",
description: "Donut chart",
icon: "ri-pie-chart-fill",
properties: {
design: { ...all },
settings: [
{ label: "Table", key: "model", control: ModelSelect },
{
label: "Chart Type",
key: "type",
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Animate Chart",
key: "isAnimated",
valueKey: "checked",
control: Checkbox,
},
{
label: "Hover Highlight",
key: "hasHoverAnimation",
valueKey: "checked",
control: Checkbox,
},
{
label: "Keep Last Hover",
key: "hasLastHoverSliceHighlighted",
valueKey: "checked",
control: Checkbox,
},
{
label: "Colors",
key: "color",
control: OptionSelect,
options: [
"column2d",
"column3d",
"line",
"area2d",
"bar2d",
"bar3d",
"pie2d",
"pie3d",
"doughnut2d",
"doughnut3d",
"pareto2d",
"pareto3d",
"britecharts",
"blueGreen",
"green",
"grey",
"orange",
"pink",
"purple",
"red",
"teal",
"yellow",
],
},
{
label: "Name Field",
key: "nameKey",
control: Input,
},
{
label: "Value Field",
key: "valueKey",
control: Input,
},
{
label: "External Radius",
key: "externalRadius",
control: Input,
},
{
label: "Internal Radius",
key: "internalRadius",
control: Input,
},
{
label: "Radius Offset",
key: "radiusHoverOffset ",
control: Input,
},
{
label: "Show Legend",
key: "useLegend ",
valueKey: "checked",
control: Checkbox,
},
{
label: "Horizontal Legend",
key: "horizontalLegend",
valueKey: "checked",
control: Checkbox,
},
{
label: "Legend Width",
key: "legendWidth",
control: Input,
},
{
label: "Legend Height",
key: "legendHeight",
control: Input,
},
],
},
children: [],
},
{
name: "Data List",
_component: "@budibase/standard-components/datalist",
description: "Shiny list",
icon: "ri-file-list-fill",
properties: {
design: { ...all },
settings: [{ label: "Table", key: "model", control: ModelSelect }],
},
children: [],
},
{
name: "List",
_component: "@budibase/standard-components/list",
description: "Renders all children once per record, of a given table",
icon: "ri-file-list-fill",
properties: {
design: { ...all },
settings: [{ label: "Table", key: "model", control: ModelSelect }],
},
children: [
{
_component: "@budibase/standard-components/heading",
name: "Headline",
description: "A component for displaying heading text",
icon: "ri-heading",
},
],
},
// {
// name: "Data List",
// _component: "@budibase/standard-components/datalist",

261
packages/standard-components/components.json
View File

@ -275,6 +275,267 @@
"model": "models"
}
},
"donut": {
"description": "Donut Chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "number",
"width": "number",
"hasFixedHighlightedSlice": "bool",
"hasLastHoverSliceHighlighted": "bool",
"hasHoverAnimation": "bool",
"numberFormat": "string",
"nameKey": "string",
"valueKey": "string",
"isAnimated": "bool",
"externalRadius": "number",
"internalRadius": "number",
"radiusHoverOffset": "number",
"percentageFormat": "string",
"useLegend": "bool",
"legendWidth": "number",
"legendHeight": "number"
}
},
"sparkline": {
"description": "Sparkline Chart",
"data": true,
"props": {
"model": "string",
"areaGradient": "string",
"height": "number",
"width": "number",
"dateLabel": "string",
"duration": "string",
"isAnimated": "bool",
"lineGradient": "string",
"titleText": "string",
"valueLabel": "string"
}
},
"stackedbar": {
"description": "Stacked Bar Chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "number",
"width": "number",
"margin": "string",
"aspectRatio": "string",
"betweenBarsPadding": "number",
"grid": "string",
"hasPercentage": "bool",
"hasReversedStacks": "bool",
"isAnimated": "bool",
"isHorizontal": "bool",
"locale": "string",
"nameLabel": "string",
"percentageAxisToMaxRatio": "number",
"stackLabel": "string",
"valueLabel": "string",
"valueLabelFormat": "string",
"xTicks": "number",
"yTicks": "number",
"yAxisLabel": "string",
"yAxisLabelOffset": "number",
"useLegend": "bool"
}
},
"stackarea": {
"description": "Step Chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "number",
"width": "number",
"margin": "string",
"xAxisLabel": "string",
"xAxisLabelOffset": "string",
"yAxisLabel": "string",
"yAxisLabelOffset": "string",
"areaCurve": "number",
"areaOpacity": "number",
"aspectRatio": "number",
"dateLabel": "string",
"grid": "string",
"isAnimated": "bool",
"keyLabel": "string",
"locale": "string",
"tooltipThreshold": "number",
"topicsOrder": "string",
"valueLabel": "string",
"xAxisCustomFormat": "string",
"xAxisFormat": "string",
"xAxisScale": "string",
"xAxisValueType":"string",
"yTicks": "number",
"xTicks": "number",
"yAxisBaseline": "string",
"useLegend": "bool"
}
},
"step": {
"description": "Step Chart",
"data": true,
"props": {
"model": "string",
"height": "number",
"width": "number",
"margin": "string",
"xAxisLabel": "string",
"xAxisLabelOffset": "string",
"yAxisLabel": "string",
"yAxisLabelOffset": "string",
"yTicks": "string"
}
},
"scatterplot": {
"description": "Scatterplot Chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "number",
"width": "number",
"aspectRatio": "string",
"circleOpacity": "string",
"grid": "string",
"hasCrossHairs": "bool",
"isAnimated": "bool",
"maxCircleArea": "number",
"xAxisLabel": "string",
"xAxisLabelOffset": "string",
"xTicks": "string",
"yAxisFormat": "string",
"yAxisLabel": "string",
"yAxisLabelOffset": "string",
"yTicks": "string"
}
},
"bar": {
"description": "Bar Chart",
"data": true,
"props": {
"model": "string",
"betweenBarsPadding": "number",
"gradient": "string",
"color": "string",
"enableLabels": "bool",
"hasSingleBarHighlight": "bool",
"height": "number",
"width": "number",
"isAnimated": "bool",
"isHorizontal": "bool",
"xAxisLabelOffset": "number",
"yAxisLabelOffset": "number",
"labelNumberFormat": "number",
"labelSize": "number",
"locale": "string",
"nameLabel": "string",
"valueLabel": "string",
"numberLabel": "string",
"xAxisLabel": "string",
"yAxisLabel": "string",
"useLegend": "bool",
"xTicks": "number",
"yTicks": "number"
}
},
"line": {
"description": "Line Chart",
"data": true,
"props": {
"model": "string",
"width": "number",
"height": "number",
"axisTimeCombinations": "string",
"color": "string",
"grid": "string",
"aspectRatio": "number",
"dateLabel": "string",
"isAnimated": "bool",
"lineCurve": "string",
"locale": "string",
"numberFormat": "string",
"shouldShowAllDataPoints": "bool",
"topicLabel": "string",
"valueLabel": "string",
"xAxisValueType": "string",
"xAxisScale": "string",
"xAxisFormat": "string",
"xAxisCustomFormat": "string",
"xAxisLabel": "string"
}
},
"brush":{
"description": "brush chart",
"data": true,
"props": {
"model": "string",
"gradient": "string",
"height": "number",
"width": "number",
"margin": "string",
"dateRange": "string",
"locale": "string",
"roundingTimeInterval": "string",
"xAxisFormat": "string",
"xTicks": "number",
"xAxisCustomFormat": "string"
}
},
"heatmap": {
"description": "Groupedbar chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "number",
"width": "number",
"useLegend": "bool",
"yAxisLabel": "string",
"boxSize": "number"
}
},
"groupedbar": {
"description": "Groupedbar chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "string",
"width": "string",
"margin": "string",
"aspectRatio": "number",
"grid":"string",
"groupLabel": "string",
"isAnimated": "bool",
"isHorizontal": "bool",
"nameLabel": "string",
"valueLabel":"string",
"yTicks": "string",
"yTickTextOffset": "string",
"useLegend": "bool"
}
},
"bullet": {
"description": "Bullet chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"customSubtitle": "string",
"customTitle": "string",
"numberFormat": "string",
"paddingBetweenAxisAndChart": "number",
"height": "number",
"width": "number"
}
},
"datachart": {
"description": "shiny chart",
"data": true,

2
packages/standard-components/package.json
View File

@ -38,6 +38,8 @@
"gitHead": "284cceb9b703c38566c6e6363c022f79a08d5691",
"dependencies": {
"@beyonk/svelte-googlemaps": "^2.2.0",
"britecharts": "^2.16.0",
"d3-selection": "^1.4.1",
"fast-sort": "^2.2.0",
"fusioncharts": "^3.15.1-sr.1",
"svelte-fusioncharts": "^1.0.0"

218
packages/standard-components/src/Chart/Bar.svelte Normal file
View File

@ -0,0 +1,218 @@
<script>
import { getColorSchema, getChartGradient } from "./Chart.svelte"
import britecharts from "britecharts"
import { onMount } from "svelte"
import { select } from "d3-selection"
import shortid from "shortid"
/*
ISSUES:
- x and y axis label set and appear in the dom but do not display next to the axis
- x and y axis label offset - does effect position of labels but does not render text (see above)
- x tick label overlaps bar, seems to be no apu method to change this? Could do it by querying for it in the dom
specifically and doing this: <tspan x="-10" dy="0.32em">4.0</tspan>
*/
let tooltip
const _id = shortid.generate()
const chart = britecharts.bar()
const chartClass = `bar-container-${_id}`
const legendClass = `legend-container-${_id}`
let chartElement = null
let chartContainer = null
let tooltipContainer = null
export let customMouseOver = () => tooltip.show()
export let customMouseMove = (datapoint, colorMapping, x, y) =>
tooltip.update(datapoint, colorMapping, x, y)
export let customMouseOut = () => tooltip.hide()
export let customClick = null
export let data = []
export let xAxisLabel = ""
export let yAxisLabel = ""
export let betweenBarsPadding = 0.1 //takes decimal values 0.1, 0.5 etc
export let gradient = null
export let color = "britecharts"
export let enableLabels = true
export let hasPercentage = null
export let hasSingleBarHighlight = true
export let highlightBarFunction = null
export let height = 200
export let width = 300
export let labelsMargin = null
export let isAnimated = true
export let isHorizontal = true
export let xAxisLabelOffset = null
export let yAxisLabelOffset = null
export let labelsNumberFormat = null
export let locale = null
export let valueLabel = null
export let nameLabel = null
export let numberFormat = null
export let labelsSize = null
export let xTicks = null
export let yTicks = null
export let percentageAxisToMaxRatio = null
export let useLegend = true
export let _bb
export let model
let store = _bb.store
onMount(async () => {
if (chartElement) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(_data).call(chart)
bindChartTooltip()
}
})
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
function bindChartUIProps() {
chart.numberFormat(".1f")
chart.labelsNumberFormat(".1f")
if (color) {
chart.colorSchema(colorSchema)
}
if (gradient) {
chart.chartGradient(chartGradient)
}
if (xAxisLabel) {
chart.xAxisLabel(xAxisLabel)
}
if (yAxisLabel) {
chart.yAxisLabel(yAxisLabel)
}
if (betweenBarsPadding) {
chart.betweenBarsPadding(Number(betweenBarsPadding))
}
if (enableLabels) {
chart.enableLabels(enableLabels)
}
if (hasPercentage) {
chart.hasPercentage(hasPercentage)
}
if (hasSingleBarHighlight) {
chart.hasSingleBarHighlight(hasSingleBarHighlight)
}
if (labelsMargin) {
chart.labelsMargin(labelsMargin)
}
if (height) {
chart.height(height)
}
if (highlightBarFunction) {
chart.highlightBarFunction(highlightBarFunction)
}
if (width) {
chart.width(width)
}
if (isAnimated) {
chart.isAnimated(isAnimated)
}
if (isHorizontal) {
chart.isHorizontal(isHorizontal)
}
if (yAxisLabelOffset) {
chart.yAxisLabelOffset(yAxisLabelOffset)
}
if (xAxisLabelOffset) {
chart.xAxisLabelOffset(Number(xAxisLabelOffset))
}
if (labelsNumberFormat) {
chart.labelsNumberFormat(labelsNumberFormat)
}
if (valueLabel) {
chart.valueLabel(valueLabel)
}
if (locale) {
chart.locale(locale)
}
if (nameLabel) {
chart.nameLabel(nameLabel)
}
if (numberFormat) {
chart.numberFormat(numberFormat)
}
if (labelsSize) {
chart.labelsSize(labelsSize)
}
if (xTicks) {
chart.xTicks(xTicks)
}
if (yTicks) {
chart.yTicks(yTicks)
}
if (percentageAxisToMaxRatio) {
chart.percentageAxisToMaxRatio(percentageAxisToMaxRatio)
}
chartContainer.datum(_data).call(chart)
}
function bindChartEvents() {
if (customMouseMove) {
chart.on("customMouseMove", customMouseMove)
}
if (customMouseOut) {
chart.on("customMouseOut", customMouseOut)
}
if (customMouseOver) {
chart.on("customMouseOver", customMouseOver)
}
if (customClick) {
chart.on("customClick", customClick)
}
}
function bindChartTooltip() {
tooltip = britecharts.miniTooltip()
tooltip.numberFormat(".0f")
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltipContainer.datum([]).call(tooltip)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
$: chartGradient = getChartGradient(gradient)
</script>
<!-- SVG Test
<svg viewBox="6 -8 200 22">
<text x="5" y="10" class="text-svg">Hello World</text>
</svg>-->
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}
<style>
.text-svg {
font: italic 15px serif;
fill: red;
}
</style>

118
packages/standard-components/src/Chart/Brush.svelte Normal file
View File

@ -0,0 +1,118 @@
<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
*/
export let _bb
export let model
let store = _bb.store
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(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(_data).call(chart)
}
})
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
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)
}
}
$: _data = model ? $store[model] : data
$: chartGradient = getChartGradient(gradient)
$: console.log(chartGradient)
</script>
<div bind:this={chartElement} class={chartClass} />

103
packages/standard-components/src/Chart/Bullet.svelte Normal file
View File

@ -0,0 +1,103 @@
<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()
export let _bb
export let model
let store = _bb.store
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(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
chartContainer.datum(_data).call(chart)
}
})
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
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)
}
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />

169
packages/standard-components/src/Chart/Chart.svelte Normal file
View File

@ -0,0 +1,169 @@
<script context="module">
//expose chart types for use or reference outside compnent
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
</script>
<script>
import { beforeUpdate } from "svelte"
import britecharts from "britecharts"
import { select } from "d3-selection"
import { onMount } from "svelte"
import shortid from "shortid"
const _id = shortid.generate()
export let type = "bar"
export let data = []
export let tooltipProps = null
export let legendProps = null
export let useTooltip = false
export let useLegend = false
export let tooltip = null //can bind to outside the component and therefore access
let chartElement = null
let chartContainer = null
let tooltipContainer = null
let legendContainer = null
let legend = null
let chart = chartTypes.includes(type) ? britecharts[type]() : null
const chartClass = `chart-container-${_id}`
const legendClass = `legend-container-${_id}`
onMount(() => {
if (chart) {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
bindChartTooltip()
bindChartLegend()
} else {
console.error("Britecharts could not be found")
}
})
function bindChartTooltip() {
if (useTooltip) {
tooltip = britecharts.miniTooltip()
bindProps(tooltip, tooltipProps)
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltipContainer.datum([]).call(tooltip)
}
}
function bindChartLegend() {
if (useLegend) {
if (!Array.isArray(data)) {
console.warn("Cannot use legend as data is not an array")
return
}
let excludeProps = []
legend = britecharts.legend()
if (!legendProps || !legendProps.width) {
excludeProps = ["width"]
legend.width(chart.width())
}
if (legendProps) {
bindProps(legend, legendProps, excludeProps)
}
legendContainer = select(`.${legendClass}`)
legendContainer.datum(data).call(legend)
}
}
function bindChartEvents() {
if ($$props.on) {
const events = Object.entries($$props.on)
for (let [type, fn] of events) {
if (fn) {
chart.on(type, fn)
}
}
}
}
function bindChartUIProps() {
const excludeProps = [
"data",
"type",
"on",
"useTooltip",
"tooltip",
"tooltipProps",
"legendProps",
"useLegend",
]
if (!$$props.width) {
chart.width(chartElement.getBoundingClientRect().width)
}
bindProps(chart, $$props, excludeProps)
}
function bindProps(element, elProps, excludeArray) {
if (elProps) {
const props = excludeArray
? Object.entries(excludeProps(elProps, excludeArray))
: Object.entries(elProps)
const validElementProps = Object.getOwnPropertyNames(element)
for (let [prop, value] of props) {
if (validElementProps.includes(prop)) {
if (!!value) {
chart[prop](value)
}
} else {
console.warn(
`${type} - ${prop} is an unrecognised chart prop and wont be applied`
)
}
}
}
}
function excludeProps(props, propsToExclude) {
const modifiedProps = {}
for (const prop in props) {
if (!propsToExclude.includes(prop)) {
modifiedProps[prop] = props[prop]
}
}
return modifiedProps
}
$: validChartProps = chart ? Object.getOwnPropertyNames(chart) : null
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

224
packages/standard-components/src/Chart/Donut.svelte Normal file
View File

@ -0,0 +1,224 @@
<script>
import { getColorSchema, notNull } from "./utils.js"
import Legend from "./Legend.svelte"
import britecharts from "britecharts"
import { onMount } from "svelte"
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 legendChart
let chartElement = null
let chartContainer = null
let chartSvgWidth = 0
let chartSvg = null
export let _bb
export let model
let store = _bb.store
export let customMouseMove = null
export let customClick = null
export let orderingFunction = null
let data = []
export let color = "britecharts"
export let height = 200
export let width = 200
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 nameKey = null
export let valueKey = null
// export let useLegend = true
export let horizontalLegend = false
export let legendWidth = null
export let legendHeight = null
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
data = checkAndReformatData($store[model])
if (data.length === 0) {
console.error(
"Donut - please provide a valid name and value field for the chart"
)
}
}
chart.emptyDataConfig({
showEmptySlice: true,
emptySliceColor: "#F0F0F0",
})
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
}
})
function checkAndReformatData(data) {
let _data = [...data]
if (valueKey) {
_data = reformatDataKey(_data, valueKey, "quantity")
}
if (nameKey) {
_data = reformatDataKey(_data, nameKey, "name")
}
return _data.every(d => d.quantity) && _data.every(d => d.name) ? _data : []
}
function reformatDataKey(data = [], dataKey = null, formatKey = null) {
let ignoreList = ["_id", "_rev", "id"]
if (dataKey && data.every(d => d[dataKey])) {
return data.map(d => {
let clonedRecord = { ...d }
if (clonedRecord[formatKey]) {
delete clonedRecord[formatKey]
}
let value = clonedRecord[dataKey]
if (!ignoreList.includes(dataKey)) {
delete clonedRecord[dataKey]
}
clonedRecord[formatKey] = value
return clonedRecord
})
} else {
return data
}
}
function bindChartUIProps() {
chart.percentageFormat(".0f")
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)
}
chartContainer.datum(data).call(chart)
chartSvg = document.querySelector(`.${chartClass} .britechart`)
}
function bindChartEvents() {
if (customClick) {
chart.on("customClick", customClick)
}
if (customMouseMove) {
chart.on("customMouseMove", customMouseMove)
}
if (legendChart) {
chart.on("customMouseOut", function() {
legendChart.clearHighlight()
})
chart.on("customMouseOver", function(data) {
legendChart.highlight(data.data.id)
})
}
}
$: if (!width && chartSvg) {
width = chartSvg.clientWidth
chart.width(width)
chartContainer.datum(data).call(chart)
}
$: colorSchema = getColorSchema(color)
</script>
<div>
<div bind:this={chartElement} class={chartClass} />
{#if data.length > 0}
<Legend
bind:legend={legendChart}
{colorSchema}
useLegend
isHorizontal={horizontalLegend}
width={legendWidth || width}
height={legendHeight}
{chartClass}
{data} />
{/if}
</div>

163
packages/standard-components/src/Chart/GroupedBar.svelte Normal file
View File

@ -0,0 +1,163 @@
<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()
export let _bb
export let model
let store = _bb.store
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(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
// bindChartEvents()
chartContainer.datum(data).call(chart)
// bindChartTooltip()
}
})
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
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)
}
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

83
packages/standard-components/src/Chart/Heatmap.svelte Normal file
View File

@ -0,0 +1,83 @@
<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()
export let _bb
export let model
let store = _bb.store
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(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
chartContainer.datum(data).call(chart)
}
})
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
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)
}
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

82
packages/standard-components/src/Chart/Legend.svelte Normal file
View File

@ -0,0 +1,82 @@
<script>
import britecharts from "britecharts"
import { notNull } from "./utils"
import { select } from "d3-selection"
import { onMount } from "svelte"
export let useLegend = true
export let data = []
export let width = null
export let height = null
export let colorSchema = null
export let highlight = null
export let highlightByEntryId = null
export let isHorizontal = false
export let margin = null
export let marginRatio = null
export let markerSize = null
export let numberFormat = null
export let unit = null
export let legend = britecharts.legend() //exported it can be bound to
let legendContainer = null
let legendElement = null
$: {
if (legendElement) {
legendContainer = select(legendElement)
legend.numberFormat(".0f")
if (width) {
legend.width(width)
}
if (notNull(height)) {
legend.height(height)
}
if (notNull(colorSchema)) {
legend.colorSchema(colorSchema)
}
if (notNull(highlight)) {
legend.highlight(highlight)
}
if (notNull(highlightByEntryId)) {
legend.highlightByEntryId(highlightByEntryId)
}
if (notNull(isHorizontal)) {
legend.isHorizontal(isHorizontal)
}
if (notNull(margin)) {
legend.margin(margin)
}
if (notNull(marginRatio)) {
legend.marginRatio(marginRatio)
}
if (notNull(markerSize)) {
legend.markerSize(markerSize)
}
if (notNull(numberFormat)) {
legend.numberFormat(numberFormat)
}
if (notNull(unit)) {
legend.unit(unit)
}
legendContainer.datum(data).call(legend)
}
}
const legendClass = `legend-container`
</script>
{#if useLegend}
<div bind:this={legendElement} class={legendClass} />
{/if}

209
packages/standard-components/src/Chart/Line.svelte Normal file
View File

@ -0,0 +1,209 @@
<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()
export let _bb
export let model
let store = _bb.store
const chart = britecharts.line()
const chartClass = `line-container-${_id}`
const legendClass = `legend-container-${_id}`
let chartElement
let chartContainer
let tooltip
let tooltipContainer
export let customMouseHover = null
export let customMouseMove = null
export let customMouseOut = null
export let customDataEntryClick = null
export let customTouchMove = null
export let data = []
export let color = "britecharts"
export let axisTimeCombinations = ""
export let grid = "horizontal"
export let aspectRatio = 0.5
export let dateLabel = "date"
export let width = null
export let height = null
export let isAnimated = true
export let lineCurve = "linear" //see api for possible opts
export let locale = "en-GB"
export let numberFormat = ""
export let shouldShowAllDataPoints = true
export let topicLabel = null
export let valueLabel = null
export let xAxisLabel = ""
export let xAxisValueType = "date"
export let xAxisScale = "linear"
export let xAxisFormat = "day-month"
export let xAxisCustomFormat = "%H"
export let yAxisLabel = null
export let useLegend = true
export let yAxisLabelPadding = null
export let lines = null //not handled by setting prop
export let tooltipThreshold = null
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(_data).call(chart)
bindChartTooltip()
}
})
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
function bindChartUIProps() {
if (notNull(color)) {
chart.colorSchema(colorSchema)
}
if (notNull(axisTimeCombinations)) {
chart.axisTimeCombinations(axisTimeCombinations)
}
if (notNull(grid)) {
chart.grid(grid)
}
if (notNull(aspectRatio)) {
chart.aspectRatio(aspectRatio)
}
if (notNull(dateLabel)) {
chart.dateLabel(dateLabel)
}
if (notNull(width)) {
chart.width(width)
}
if (notNull(height)) {
chart.height(height)
}
if (notNull(isAnimated)) {
chart.isAnimated(isAnimated)
}
if (notNull(lineCurve)) {
chart.lineCurve(lineCurve)
}
if (notNull(locale)) {
chart.locale(locale)
}
if (notNull(numberFormat)) {
chart.numberFormat(numberFormat)
}
if (notNull(shouldShowAllDataPoints)) {
chart.shouldShowAllDataPoints(shouldShowAllDataPoints)
}
if (notNull(topicLabel)) {
chart.topicLabel(topicLabel)
}
if (notNull(valueLabel)) {
chart.valueLabel(valueLabel)
}
if (notNull(xAxisLabel)) {
chart.xAxisLabel(xAxisLabel)
}
if (notNull(xAxisValueType)) {
chart.xAxisValueType(xAxisValueType)
}
if (notNull(xAxisScale)) {
chart.xAxisScale(xAxisScale)
}
if (notNull(xAxisFormat)) {
chart.xAxisFormat(xAxisFormat)
}
if (notNull(xAxisCustomFormat)) {
chart.xAxisCustomFormat(xAxisCustomFormat)
}
if (notNull(yAxisLabel)) {
chart.yAxisLabel(yAxisLabel)
}
if (notNull(yAxisLabelPadding)) {
chart.yAxisLabelPadding(yAxisLabelPadding)
}
}
function bindChartEvents() {
if (customMouseHover) {
chart.on("customMouseHover", customMouseHover)
}
if (customMouseMove) {
chart.on("customMouseMove", customMouseMove)
}
if (customMouseOut) {
chart.on("customMouseOut", customMouseOut)
}
if (customDataEntryClick) {
chart.on("customDataEntryClick", customDataEntryClick)
}
if (customTouchMove) {
chart.on("customTouchMove", customTouchMove)
}
}
function bindChartTooltip() {
tooltip = britecharts.miniTooltip()
tooltipContainer = select(`.${chartClass} .metadata-group`)
tooltipContainer.datum([]).call(tooltip)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}
<!--
isAnimated={true}
aspectRatio={0.5}
grid='horizontal'
tooltipThreshold={600}
width={600}
dateLabel='fullDate'
{type}
{data}
{colorSchema}
{axisTimeCombinations}
{lineCurve}
{numberFormat}
{height}
{topicLabel}
{shouldShowAllDataPoints}
{xAxisLabel}
{valueLabel}
{xAxisValueType}
{xAxisScale}
{xAxisCustomFormat}
-->

187
packages/standard-components/src/Chart/ScatterPlot.svelte Normal file
View File

@ -0,0 +1,187 @@
<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()
export let _bb
export let model
let store = _bb.store
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(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(_data).call(chart)
bindChartTooltip()
}
})
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
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)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

103
packages/standard-components/src/Chart/Sparkline.svelte Normal file
View File

@ -0,0 +1,103 @@
<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()
export let _bb
export let model
let store = _bb.store
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(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
chartContainer.datum(_data).call(chart)
}
})
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
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)
}
}
$: _data = model ? $store[model] : data
$: aGradient = getChartGradient(areaGradient)
$: lGradient = getChartGradient(lineGradient)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

181
packages/standard-components/src/Chart/StackedArea.svelte Normal file
View File

@ -0,0 +1,181 @@
<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()
export let _bb
export let model
let store = _bb.store
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(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(_data).call(chart)
bindChartTooltip()
}
})
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
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)
}
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

176
packages/standard-components/src/Chart/StackedBar.svelte Normal file
View File

@ -0,0 +1,176 @@
<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}`
export let _bb
export let model
let store = _bb.store
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(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(_data).call(chart)
// bindChartTooltip()
}
})
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
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)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

129
packages/standard-components/src/Chart/Step.svelte Normal file
View File

@ -0,0 +1,129 @@
<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()
export let _bb
export let model
let store = _bb.store
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(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(_data).call(chart)
bindChartTooltip()
}
})
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)
if (response.status === 200) {
const json = await response.json()
store.update(state => {
state[model] = json
return state
})
} else {
throw new Error("Failed to fetch records.", response)
}
}
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)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

41
packages/standard-components/src/Chart/Temp.svelte Normal file
View File

@ -0,0 +1,41 @@
<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()
}
})
$: colorSchema = getColorSchema(color)
</script>
<div bind:this={chartElement} class={chartClass} />
{#if useLegend}
<div class={legendClass} />
{/if}

12
packages/standard-components/src/Chart/index.js Normal file
View File

@ -0,0 +1,12 @@
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"
export { default as groupedbar } from "./GroupedBar.svelte"
export { default as heatmap } from "./Heatmap.svelte"
export { default as sparkline } from "./Sparkline.svelte"
export { default as scatterplot } from "./ScatterPlot.svelte"
export { default as step } from "./Step.svelte"
export { default as stackedarea } from "./StackedArea.svelte"
export { default as stackedbar } from "./StackedBar.svelte"

73
packages/standard-components/src/Chart/tests/bar.html Normal file
View File

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-selection/1.2.0/d3-selection.js"></script>
<script src="https://cdn.jsdelivr.net/npm/britecharts@2.10.0/dist/umd/bar.min.js"
type="text/javascript"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/britecharts/dist/css/britecharts.min.css" type="text/css" />
</head>
<body>
<article>
<h2 class="tutorial__heading">Bar Chart</h2>
<div class="bar-chart"></div>
</article>
<script>
const dataset = [
{
"name": "Radiating",
"value": 2
},
{
"name": "Opalescent",
"value": 4
},
{
"name": "Shining",
"value": 3
},
{
"name": "Vibrant",
"value": 6
},
{
"name": "Vivid",
"value": 6
},
{
"name": "Brilliant",
"value": 1
}
]
const barContainer = d3.select('.bar-chart');
const barChart = britecharts.bar()
barChart
.width(700)
.height(300)
.enableLabels(true)
.labelsNumberFormat('.0%')
.isAnimated(true)
.yAxisLabel("Quantity")
.xAxisLabel("Color")
.betweenBarsPadding("0.8")
// .on('customMouseOver', tooltip.show)
// .on('customMouseMove', tooltip.update)
// .on('customMouseOut', tooltip.hide);
barContainer.datum(dataset).call(barChart);
</script>
</body>
</html>

19
packages/standard-components/src/Chart/utils.js Normal file
View File

@ -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

2
packages/standard-components/src/DataChart.svelte
View File

@ -23,6 +23,8 @@
},
}
$: console.log("CHART CONFIGS", chartConfigs)
async function fetchData() {
const FETCH_RECORDS_URL = `/api/views/all_${model}`
const response = await _bb.api.get(FETCH_RECORDS_URL)

1
packages/standard-components/src/index.js
View File

@ -24,3 +24,4 @@ export { default as datasearch } from "./DataSearch.svelte"
export { default as embed } from "./Embed.svelte"
export { default as stackedlist } from "./StackedList.svelte"
export { default as recorddetail } from "./RecordDetail.svelte"
export * from "./Chart"