CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-01 09:38:55 +13:00
Code Issues Projects Releases Wiki Activity

Table / model integration for charts

Browse source
This commit is contained in:
cmack 2020-08-04 13:55:26 +01:00
parent cc3cbb7a5b
commit 1e3d394274
14 changed files with 366 additions and 32 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View file

@ -593,6 +593,11 @@ export default {
},
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Color",
key: "color",
@ -665,6 +670,11 @@ export default {
},
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Colors",
key: "color",
@ -779,6 +789,11 @@ export default {
},
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Color",
key: "color",
@ -911,6 +926,11 @@ export default {
},
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "height",
key: "height",
@ -963,6 +983,11 @@ export default {
},
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Line Gradient",
key: "lineGradient",
@ -1038,6 +1063,11 @@ export default {
},
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Y Axis Label",
key: "yAxisLabel",
@ -1145,6 +1175,11 @@ export default {
key: "nameLabel",
control: Input,
},
{
label: "Value Label",
key: "valueLabel",
control: Input,
},
{
label: "Number Format",
key: "numberFormat",
@ -1178,6 +1213,11 @@ export default {
},
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Gradient",
key: "gradient",
@ -1282,6 +1322,11 @@ export default {
},
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Color",
key: "color",
@ -1374,6 +1419,11 @@ export default {
},
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Color",
key: "color",
@ -1435,6 +1485,11 @@ export default {
},
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "Colors",
key: "color",
@ -1609,6 +1664,11 @@ export default {
},
properties: {
settings: [
{
label: "Table",
key: "model",
control: ModelSelect,
},
{
label: "X Axis Combo",
key: "axisTimeCombinations",

16
packages/standard-components/components.json
View file

@ -279,10 +279,10 @@
"description": "Donut Chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "number",
"width": "number",
"model": "string",
"hasFixedHighlightedSlice": "bool",
"hasLastHoverSliceHighlighted": "bool",
"hasHoverAnimation": "bool",
@ -299,6 +299,7 @@
"description": "Sparkline Chart",
"data": true,
"props": {
"model": "string",
"areaGradient": "string",
"height": "number",
"width": "number",
@ -314,6 +315,7 @@
"description": "Stacked Bar Chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "number",
"width": "number",
@ -342,6 +344,7 @@
"description": "Step Chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "number",
"width": "number",
@ -375,6 +378,7 @@
"description": "Step Chart",
"data": true,
"props": {
"model": "string",
"height": "number",
"width": "number",
"margin": "string",
@ -389,6 +393,7 @@
"description": "Scatterplot Chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "number",
"width": "number",
@ -411,6 +416,7 @@
"description": "Bar Chart",
"data": true,
"props": {
"model": "string",
"betweenBarsPadding": "number",
"gradient": "string",
"color": "string",
@ -425,7 +431,8 @@
"labelNumberFormat": "number",
"labelSize": "number",
"locale": "string",
"nameLabel": "string",
"nameLabel": "string",
"valueLabel": "string",
"numberLabel": "string",
"xAxisLabel": "string",
"yAxisLabel": "string",
@ -438,6 +445,7 @@
"description": "Line Chart",
"data": true,
"props": {
"model": "string",
"width": "number",
"height": "number",
"axisTimeCombinations": "string",
@ -463,6 +471,7 @@
"description": "brush chart",
"data": true,
"props": {
"model": "string",
"gradient": "string",
"height": "number",
"width": "number",
@ -479,6 +488,7 @@
"description": "Groupedbar chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "number",
"width": "number",
@ -491,6 +501,7 @@
"description": "Groupedbar chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"height": "string",
"width": "string",
@ -511,6 +522,7 @@
"description": "Bullet chart",
"data": true,
"props": {
"model": "string",
"color": "string",
"customSubtitle": "string",
"customTitle": "string",

26
packages/standard-components/src/Chart/Bar.svelte
View file

@ -56,16 +56,36 @@
export let useLegend = true
onMount(() => {
export let _bb
export let model
let store = _bb.store
onMount(async () => {
if (chartElement) {
await fetchData()
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
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 (color) {
chart.colorSchema(colorSchema)
@ -165,6 +185,8 @@
tooltipContainer.datum([]).call(tooltip)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
$: chartGradient = getChartGradient(gradient)
</script>

28
packages/standard-components/src/Chart/Brush.svelte
View file

@ -11,6 +11,11 @@
- 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()
@ -36,15 +41,32 @@
export let xTicks = null
export let xAxisCustomFormat = null
onMount(() => {
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
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)
@ -87,6 +109,8 @@
}
}
$: _data = model ? $store[model] : data
$: chartGradient = getChartGradient(gradient)
$: console.log(chartGradient)
</script>

28
packages/standard-components/src/Chart/Bullet.svelte
View file

@ -8,6 +8,11 @@
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}`
@ -29,14 +34,31 @@
export let width = 200
export let margin = { top: 0, right: 0, bottom: 0, left: 0 }
onMount(() => {
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
chartContainer.datum(data).call(chart)
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)
@ -73,6 +95,8 @@
}
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>

10
packages/standard-components/src/Chart/Donut.svelte
View file

@ -60,15 +60,13 @@
}
}
onMount(async () => {
await fetchData()
})
$: _data = model ? $store[model] : data
$: console.log("_data", _data)
onMount(() => {
onMount(async () => {
if (chart) {
await fetchData()
chart.emptyDataConfig({
showEmptySlice: true,
emptySliceColor: "#000000",
@ -76,7 +74,7 @@
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
chartContainer.datum(_data).call(chart)
}
})

26
packages/standard-components/src/Chart/GroupedBar.svelte
View file

@ -13,6 +13,11 @@
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}`
@ -48,8 +53,11 @@
export let yTickTextOffset = null
export let useLegend = true
onMount(() => {
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
// bindChartEvents()
@ -58,6 +66,20 @@
}
})
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)
@ -130,6 +152,8 @@
}
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>

26
packages/standard-components/src/Chart/Heatmap.svelte
View file

@ -8,6 +8,11 @@
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}`
@ -24,14 +29,31 @@
export let yAxisLabels = null
export let boxSize = null
onMount(() => {
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)
@ -50,6 +72,8 @@
}
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>

38
packages/standard-components/src/Chart/Line.svelte
View file

@ -8,6 +8,11 @@
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}`
@ -49,14 +54,33 @@
export let lines = null //not handled by setting prop
export let tooltipThreshold = null
onMount(() => {
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
bindChartTooltip()
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)
@ -148,6 +172,8 @@
tooltipContainer.datum([]).call(tooltip)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>

28
packages/standard-components/src/Chart/ScatterPlot.svelte
View file

@ -8,6 +8,11 @@
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}`
@ -51,16 +56,33 @@
export let yTicks = null
export let useLegend = true
onMount(() => {
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
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)
@ -154,6 +176,8 @@
tooltipContainer.datum([]).call(tooltip)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>

28
packages/standard-components/src/Chart/Sparkline.svelte
View file

@ -8,6 +8,11 @@
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}`
@ -28,14 +33,31 @@
export let valueLabel = null
export let useLegend = true
onMount(() => {
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
chartContainer.datum(data).call(chart)
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)
@ -69,6 +91,8 @@
}
}
$: _data = model ? $store[model] : data
$: aGradient = getChartGradient(areaGradient)
$: lGradient = getChartGradient(lineGradient)
</script>

28
packages/standard-components/src/Chart/StackedArea.svelte
View file

@ -8,6 +8,11 @@
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}`
@ -51,16 +56,33 @@
export let yTicks = null
export let useLegend = true
onMount(() => {
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
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)
@ -148,6 +170,8 @@
}
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>

28
packages/standard-components/src/Chart/StackedBar.svelte
View file

@ -12,6 +12,11 @@
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
@ -46,16 +51,33 @@
export let yAxisLabelOffset = null
export let useLegend = true
onMount(() => {
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
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)) {
@ -143,6 +165,8 @@
tooltipContainer.datum([]).call(tooltip)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>

28
packages/standard-components/src/Chart/Step.svelte
View file

@ -12,6 +12,11 @@
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}`
@ -41,16 +46,33 @@
export let yTicks = null
export let useLegend = true
onMount(() => {
onMount(async () => {
if (chart) {
if (model) {
await fetchData()
}
chartContainer = select(`.${chartClass}`)
bindChartUIProps()
bindChartEvents()
chartContainer.datum(data).call(chart)
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)
@ -96,6 +118,8 @@
tooltipContainer.datum([]).call(tooltip)
}
$: _data = model ? $store[model] : data
$: colorSchema = getColorSchema(color)
</script>