Skip to content

Commit

Permalink
fix: Clean up Plotly chart margins and layouts
Browse files Browse the repository at this point in the history 
We were using an old version of the Plotly library
...AND we didn't have things configured properly.
  • Loading branch information
@billyc
billyc committed Feb 10, 2022
1 parent 231f70d commit cb52138
Show file tree
Hide file tree
Showing 7 changed files with 116 additions and 93 deletions.
46 changes: 30 additions & 16 deletions src/charts/area.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ export default class VueComponent extends Vue {
private id = 'area-' + Math.random()
private async mounted() {
this.updateLayout()
this.updateTheme()
this.dataSet = await this.loadData()
this.updateChart()
Expand All @@ -49,15 +50,21 @@ export default class VueComponent extends Vue {
this.layout = Object.assign({}, this.layout, dimensions)
}
@Watch('globalState.isDarkMode') updateTheme() {
@Watch('globalState.isDarkMode')
updateTheme() {
const colors = {
paper_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
plot_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
paper_bgcolor: this.globalState.isDarkMode ? '#242627' : '#fff',
plot_bgcolor: this.globalState.isDarkMode ? '#242627' : '#fff',
font: { color: this.globalState.isDarkMode ? '#cccccc' : '#444444' },
}
this.layout = Object.assign({}, this.layout, colors)
}
private updateLayout() {
this.layout.xaxis.title.text = this.config.xAxisTitle || this.config.xAxisName || ''
this.layout.yaxis.title.text = this.config.yAxisTitle || this.config.yAxisName || ''
}
private async loadData() {
if (!this.files.length) return {}
Expand Down Expand Up @@ -153,20 +160,28 @@ export default class VueComponent extends Vue {
private layout: any = {
height: 300,
margin: { t: 25, b: 0, l: 0, r: 0 },
margin: { t: 8, b: 0, l: 0, r: 0, pad: 2 },
font: {
color: '#444444',
family: UI_FONT,
},
xaxis: {
// title: {
// text: this.config.x,
// // standoff: 0,
// },
automargin: true,
autorange: true,
title: { text: '', standoff: 12 },
animate: true,
},
yaxis: {
automargin: true,
autorange: true,
title: { text: '', standoff: 16 },
animate: true,
showgrid: false,
},
yaxis: { automargin: true, showgrid: false },
legend: { orientation: 'h' }, // , yanchor: 'bottom', y: -0.4 },
font: {
family: UI_FONT,
color: '#444444',
legend: {
orientation: 'v',
x: 1,
y: 1,
},
}
Expand All @@ -193,9 +208,8 @@ export default class VueComponent extends Vue {
toImageButtonOptions: {
format: 'png', // one of png, svg, jpeg, webp
filename: 'area-chart',
width: 1200,
height: 800,
scale: 1.0, // Multiply title/legend/axis/canvas sizes by this factor
width: null,
height: null,
},
}
}
Expand Down
48 changes: 18 additions & 30 deletions src/charts/bar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,16 +65,16 @@ export default class VueComponent extends Vue {
@Watch('globalState.isDarkMode')
updateTheme() {
const colors = {
paper_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
plot_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
paper_bgcolor: this.globalState.isDarkMode ? '#242627' : '#fff',
plot_bgcolor: this.globalState.isDarkMode ? '#242627' : '#fff',
font: { color: this.globalState.isDarkMode ? '#cccccc' : '#444444' },
}
this.layout = Object.assign({}, this.layout, colors)
}
private updateLayout() {
this.layout.xaxis.title = this.config.xAxisTitle || this.config.xAxisName || ''
this.layout.yaxis.title = this.config.yAxisTitle || this.config.yAxisName || ''
this.layout.xaxis.title.text = this.config.xAxisTitle || this.config.xAxisName || ''
this.layout.yaxis.title.text = this.config.yAxisTitle || this.config.yAxisName || ''
}
private async handlePlotlyClick(click: any) {
Expand Down Expand Up @@ -139,19 +139,6 @@ export default class VueComponent extends Vue {
return Math.floor(Math.random() * max).toString()
}
private remFactor = 0
private rem2px(rem: number) {
// only calculate the factor one time
if (!this.remFactor) {
var el = document.createElement('div')
document.body.appendChild(el)
el.style.width = '1000rem'
var factor = el.clientWidth / 1000
document.body.removeChild(el)
}
return rem * this.remFactor
}
private updateChart() {
try {
if (this.config.groupBy) this.updateChartWithGroupBy()
Expand Down Expand Up @@ -258,28 +245,30 @@ export default class VueComponent extends Vue {
}
private layout: any = {
barmode: 'overlay',
bargap: 0.08,
height: 300,
margin: { t: 30, b: 50, l: 60, r: 20 },
//legend: { orientation: 'h' }, // , yanchor: 'bottom', y: -0.4 },
margin: { t: 8, b: 0, l: 0, r: 0, pad: 2 },
font: {
color: '#444444',
family: UI_FONT,
},
barmode: 'overlay',
bargap: 0.08,
xaxis: {
automargin: true,
autorange: true,
title: '',
title: { text: '', standoff: 12 },
animate: true,
},
yaxis: {
automargin: true,
autorange: true,
title: '',
title: { text: '', standoff: 16 },
animate: true,
},
legend: {
// x: 0.5,
// xanchor: 'right',
// y: 0,
orientation: 'h',
orientation: 'v',
x: 1,
y: 1,
},
}
Expand All @@ -305,9 +294,8 @@ export default class VueComponent extends Vue {
toImageButtonOptions: {
format: 'png', // one of png, svg, jpeg, webp
filename: 'bar-chart',
width: 1200,
height: 800,
scale: 1.0, // Multiply title/legend/axis/canvas sizes by this factor
width: null,
height: null,
},
}
}
Expand Down
25 changes: 13 additions & 12 deletions src/charts/bubble.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,8 +72,8 @@ export default class VueComponent extends Vue {
}
private updateChart() {
this.layout.xaxis.title = this.config.xAxisTitle || this.config.xAxisName || ''
this.layout.yaxis.title = this.config.yAxisTitle || this.config.yAxisName || ''
this.layout.xaxis.title.text = this.config.xAxisTitle || this.config.xAxisName || ''
this.layout.yaxis.title.text = this.config.yAxisTitle || this.config.yAxisName || ''
try {
if (this.config.groupBy) this.updateChartWithGroupBy()
Expand Down Expand Up @@ -132,24 +132,26 @@ export default class VueComponent extends Vue {
private layout: any = {
height: 300,
// width: 500,
margin: { t: 30, b: 50, l: 60, r: 20 },
//legend: { orientation: 'h' }, // , yanchor: 'bottom', y: -0.4 },
margin: { t: 8, b: 0, l: 0, r: 0, pad: 2 },
font: {
family: UI_FONT,
color: '#444444',
family: UI_FONT,
},
xaxis: {
automargin: true,
autorange: true,
title: '',
title: { text: '', standoff: 12 },
animate: true,
},
yaxis: {
automargin: true,
autorange: true,
title: '',
title: { text: '', standoff: 16 },
animate: true,
},
legend: {
orientation: 'v',
x: 1,
xanchor: 'right',
y: 1,
},
}
Expand All @@ -176,9 +178,8 @@ export default class VueComponent extends Vue {
toImageButtonOptions: {
format: 'png', // one of png, svg, jpeg, webp
filename: 'bubble-chart',
width: 1200,
height: 800,
scale: 1.0, // Multiply title/legend/axis/canvas sizes by this factor
width: null,
height: null,
},
}
}
Expand Down
32 changes: 17 additions & 15 deletions src/charts/line.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,8 +49,8 @@ export default class VueComponent extends Vue {
@Watch('globalState.isDarkMode') updateTheme() {
const colors = {
paper_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
plot_bgcolor: this.globalState.isDarkMode ? '#282c34' : '#fff',
paper_bgcolor: this.globalState.isDarkMode ? '#242627' : '#fff',
plot_bgcolor: this.globalState.isDarkMode ? '#242627' : '#fff',
font: { color: this.globalState.isDarkMode ? '#cccccc' : '#444444' },
}
this.layout = Object.assign({}, this.layout, colors)
Expand All @@ -71,8 +71,8 @@ export default class VueComponent extends Vue {
}
private updateChart() {
this.layout.xaxis.title = this.config.xAxisTitle || this.config.xAxisName || ''
this.layout.yaxis.title = this.config.yAxisTitle || this.config.yAxisName || ''
this.layout.xaxis.title.text = this.config.xAxisTitle || this.config.xAxisName || ''
this.layout.yaxis.title.text = this.config.yAxisTitle || this.config.yAxisName || ''
try {
if (this.config.groupBy) this.updateChartWithGroupBy()
Expand Down Expand Up @@ -153,25 +153,28 @@ export default class VueComponent extends Vue {
private layout: any = {
height: 300,
margin: { t: 30, b: 50, l: 60, r: 20 },
margin: { t: 8, b: 0, l: 0, r: 0, pad: 2 },
font: {
family: UI_FONT,
color: '#444444',
family: UI_FONT,
},
xaxis: {
automargin: true,
autorange: true,
title: '',
title: { text: '', standoff: 12 },
animate: true,
},
yaxis: {
automargin: true,
autorange: true,
title: '',
title: { text: '', standoff: 16 },
animate: true,
rangemode: 'tozero',
},
legend: {
// x: 0.5,
// xanchor: 'right',
// y: 0,
orientation: 'h',
orientation: 'v',
x: 1,
y: 1,
},
}
Expand All @@ -197,9 +200,8 @@ export default class VueComponent extends Vue {
toImageButtonOptions: {
format: 'png', // one of png, svg, jpeg, webp
filename: 'line-chart',
width: 1200,
height: 800,
scale: 1.0, // Multiply title/legend/axis/canvas sizes by this factor
width: null,
height: null,
},
}
}
Expand Down
31 changes: 24 additions & 7 deletions src/charts/pie.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,29 @@ export default class VueComponent extends Vue {
private layout: any = {
height: 300,
margin: { t: 30, b: 5, l: 0, r: 0 },
legend: { orientation: 'h' }, // , yanchor: 'bottom', y: -0.4 },
margin: { t: 8, b: 0, l: 0, r: 0, pad: 2 },
font: {
family: UI_FONT,
color: '#444444',
family: UI_FONT,
},
xaxis: {
automargin: true,
autorange: true,
title: { text: '', standoff: 12 },
animate: true,
},
yaxis: {
automargin: true,
autorange: true,
title: { text: '', standoff: 16 },
animate: true,
},
legend: {
// yanchor: 'top',
// xanchor: 'center',
orientation: 'v',
x: 1,
y: 1,
},
}
Expand All @@ -109,7 +127,7 @@ export default class VueComponent extends Vue {
labels: [] as any[],
values: [] as any[],
type: 'pie',
hole: 0.2,
hole: 0.1,
textinfo: 'label+percent',
textposition: 'inside',
automargin: true,
Expand All @@ -136,9 +154,8 @@ export default class VueComponent extends Vue {
toImageButtonOptions: {
format: 'png', // one of png, svg, jpeg, webp
filename: 'pie-chart',
width: 1200,
height: 800,
scale: 1.0, // Multiply title/legend/axis/canvas sizes by this factor
width: null,
height: null,
},
}
}
Expand Down

0 comments on commit cb52138

Please sign in to comment.