add update js, css code to display data-title attribute for percentag…

…e bar chart component, for #413
middlebury · Oct 14, 2024 · 10d0893 · 10d0893
1 parent 35eca3c
commit 10d0893
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 4 deletions.
diff --git a/src/js/charts.tsx b/src/js/charts.tsx
@@ -221,7 +221,6 @@ class MiddChart {
           borderColor: '#ccc',
           callbacks: {
             label: (context) => {
-              // console.log(context);
               return `${context.dataset.label}: ${context.raw}${valueSuffix}`;
             }
           }

diff --git a/src/js/components/percent-bar-chart.tsx b/src/js/components/percent-bar-chart.tsx
@@ -34,12 +34,14 @@ interface PercentBarProps {
   labels: string[];
   datasets: DataSet[];
   colors: string[];
+  title?: string;
 }
 
 const PercentBarChart: FunctionComponent<PercentBarProps> = ({
   labels,
   datasets,
-  colors
+  colors,
+  title
 }) => {
   // reconstruct a data array with the first dataset since the component only supports
   // rendering one dataset.
@@ -73,7 +75,8 @@ const PercentBarChart: FunctionComponent<PercentBarProps> = ({
   const sortedLabels = preparedData.map((data: any) => data.label);
 
   return (
-    <div>
+    <figure className='chart--percentage-bar'>
+      {title && <figcaption>{title}</figcaption>}
       <div
         style={{
           display: 'flex',
@@ -101,7 +104,7 @@ const PercentBarChart: FunctionComponent<PercentBarProps> = ({
         })}
       </div>
       <Legend items={sortedLabels} colors={colors} />
-    </div>
+    </figure>
   );
 };
 

diff --git a/src/scss/components/_chart.scss b/src/scss/components/_chart.scss
@@ -58,6 +58,14 @@
   margin-right: 0;
 }
 
+.chart--percentage-bar {
+  figcaption {
+    font-size: $typescale-2;
+    font-weight: $font-weight-medium;
+    text-align: center;
+    padding: $spacing-4;
+  }
+}
 ///
 //// Chart legend
 ///