Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add caption for chart panels #507

Merged
merged 1 commit into from
Dec 2, 2024
Merged

Add caption for chart panels #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 26 additions & 5 deletions public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,8 @@
"items": [
{
"type": "chart",
"src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json"
"src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json",
"caption": "caption for a chart"
},
{
"type": "chart",
Expand All @@ -152,7 +153,8 @@
"title": "Selenium releases and disposals in 2019",
"subtitle": "",
"type": "pie"
}
},
"caption": "caption for another chart"
}
]
}
Expand Down Expand Up @@ -460,7 +462,8 @@
"items": [
{
"type": "chart",
"src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json"
"src": "00000000-0000-0000-0000-000000000000/charts/en/chartConfig.json",
"caption": "Caption for first chart"
},
{
"type": "chart",
Expand All @@ -470,7 +473,8 @@
"xAxisLabel": "Quantity (tonnes)",
"subtitle": "",
"type": "bar"
}
},
"caption": "caption for second chart"
},
{
"type": "chart",
Expand All @@ -479,7 +483,8 @@
"title": "Figure 1: Percentage of total ethylene glycol releases for 2019, by sector",
"subtitle": "",
"type": "pie"
}
},
"caption": "caption for third chart"
}
]
}
Expand Down Expand Up @@ -535,6 +540,22 @@
}
],
"includeInToc": false
},
{
"title": "another chart slide",
"backgroundImage": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-187242601__1554821467033__w1920.jpg",
"panel": [
{
"type": "chart",
"src": "00000000-0000-0000-0000-000000000000/charts/en/hybridChartConfig.json",
"caption": "Caption for chart"
},
{
"src": "00000000-0000-0000-0000-000000000000/assets/en/GettyImages-516166467__1554821531978__w1920.jpg",
"type": "image"
}

]
}
],
"tocOrientation": "horizontal",
Expand Down
12 changes: 12 additions & 0 deletions src/components/panels/chart-panel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<div class="chart self-center mb-8 mx-auto bg-gray-200_">
<chart :config="config" :configFileStructure="configFileStructure" />
<div class="text-center w-full p-2 text-sm" :class="{ 'has-background': background }">
{{ config.caption }}
</div>
</div>
</template>

Expand All @@ -16,6 +19,9 @@ defineProps({
},
configFileStructure: {
type: Object as PropType<ConfigFileStructure>
},
background: {
type: Boolean
}
});
</script>
Expand All @@ -25,6 +31,12 @@ defineProps({
height: auto;
}

.has-background {
background-color: rgba(255, 255, 255, 1);
border-radius: 0px 0px 8px 8px;
color: black;
}

@media screen and (max-width: 640px) {
.chart {
max-width: 100vw;
Expand Down
2 changes: 2 additions & 0 deletions src/definitions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,7 @@ export interface ChartPanel extends BasePanel {
config?: any;
name?: string;
options?: DQVOptions;
caption?: string;
}

export interface ChartConfig {
Expand All @@ -268,6 +269,7 @@ export interface ChartConfig {
config?: any;
name?: string;
options?: DQVOptions;
caption?: string;
}

export interface BreadcrumbConfig {
Expand Down
Loading