Merge pull request #507 from IshavSohal/chart-captions

Add caption for chart panels
ramp4-pcar4 · Dec 2, 2024 · 20a17a9 · 20a17a9
2 parents 70a41e0 + 8bd1224
commit 20a17a9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json b/public/00000000-0000-0000-0000-000000000000/00000000-0000-0000-0000-000000000000_en.json
@@ -166,7 +166,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",
@@ -175,7 +176,8 @@
                                             "title": "Selenium releases and disposals in 2019",
                                             "subtitle": "",
                                             "type": "pie"
-                                        }
+                                        }, 
+                                        "caption": "caption for another chart"
                                     }
                                 ]
                             }
@@ -483,7 +485,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",
@@ -493,7 +496,8 @@
                                 "xAxisLabel": "Quantity (tonnes)",
                                 "subtitle": "",
                                 "type": "bar"
-                            }
+                            }, 
+                            "caption": "caption for second chart"
                         },
                         {
                             "type": "chart",
@@ -502,7 +506,8 @@
                                 "title": "Figure 1: Percentage of total ethylene glycol releases for 2019, by sector",
                                 "subtitle": "",
                                 "type": "pie"
-                            }
+                            }, 
+                            "caption": "caption for third chart"
                         }
                     ]
                 }
@@ -558,6 +563,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",

diff --git a/src/components/panels/chart-panel.vue b/src/components/panels/chart-panel.vue
@@ -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>
 
@@ -16,6 +19,9 @@ defineProps({
     },
     configFileStructure: {
         type: Object as PropType<ConfigFileStructure>
+    },
+    background: {
+        type: Boolean
     }
 });
 </script>
@@ -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;

diff --git a/src/definitions.ts b/src/definitions.ts
@@ -262,6 +262,7 @@ export interface ChartPanel extends BasePanel {
     config?: any;
     name?: string;
     options?: DQVOptions;
+    caption?: string;
 }
 
 export interface ChartConfig {
@@ -270,6 +271,7 @@ export interface ChartConfig {
     config?: any;
     name?: string;
     options?: DQVOptions;
+    caption?: string;
 }
 
 export interface BreadcrumbConfig {