feat(analytics-chart): experimenting with legend styling

packages/analytics/analytics-chart/src/components/AnalyticsChart.cy.ts

@@ -119,7 +119,7 @@ describe('<AnalyticsChart />', () => {
     cy.get('.analytics-chart-parent').should('be.visible')
     cy.get('[data-testid="bar-chart-container"]').should('be.visible')
     cy.get('.chart-header').should('contain.text', 'Horizontal bar chart')
-    cy.get('.legend').should('have.length', 5)
+    cy.get('.square-marker').should('have.length', 5)
     cy.get('.label').eq(0).should('have.text', '200')
     cy.get('.sub-label').should('not.exist')
   })
@@ -305,8 +305,8 @@ describe('<AnalyticsChart />', () => {
 
     cy.get('.analytics-chart-parent').should('be.visible')
 
-    // Move mouse from (x1, y1) to (x2, y2), over 400ms, while clicking
-    mouseMove(200, 50, 300, 50, 400, true)
+    // Move mouse from (x1, y1) to (x2, y2), over 300ms, while clicking
+    mouseMove(200, 50, 300, 50, 300, true)
 
     cy.get('body').should(($body) => {
       const tooltipExists = $body.find('.tooltip-container').length > 0

packages/analytics/analytics-chart/src/components/chart-plugins/ChartLegend.vue

@@ -13,7 +13,7 @@
       @click="handleLegendItemClick(datasetIndex, index)"
     >
       <div
-        class="legend"
+        class="square-marker"
         :style="{ background: fillStyle, 'border-color': strokeStyle }"
       />
       <div
@@ -42,7 +42,7 @@
 import { ChartLegendPosition } from '../../enums'
 import { Chart, type LegendItem } from 'chart.js'
 import { inject, onBeforeUnmount, onMounted, ref, watch, type PropType, computed } from 'vue'
-import { KUI_SPACE_100, KUI_SPACE_80, KUI_SPACE_110 } from '@kong/design-tokens'
+import { KUI_SPACE_80, KUI_SPACE_100 } from '@kong/design-tokens'
 import { debounce } from '../../utils'
 
 const props = defineProps({
@@ -74,7 +74,6 @@ const doesTheLegendWrap = () => {
   if (!element || !legendItemsRef.value || element.children.length === 0) {
     return 0
   }
-
   const previousTop = element.children[0].getBoundingClientRect().top
   for (const item of legendItemsRef.value) {
     const currentTop = item.getBoundingClientRect().top
@@ -96,7 +95,7 @@ const checkForWrap = () => {
   if (legendContainerRef.value && position.value === ChartLegendPosition.Bottom) {
     if (doesTheLegendWrap()) {
       // Allow for two rows of legend items
-      legendHeight.value = KUI_SPACE_110
+      legendHeight.value = KUI_SPACE_100
     } else {
       // Only need space for one row of legend items
       legendHeight.value = KUI_SPACE_80
@@ -224,34 +223,35 @@ const isDatasetVisible = (datasetIndex: number = 0, segmentIndex: number): boole
 
 const positionToClass = (position: `${ChartLegendPosition}`) => {
   return {
-    [ChartLegendPosition.Right]: 'vertical',
-    [ChartLegendPosition.Bottom]: 'horizontal',
+    [ChartLegendPosition.Right]: 'right',
+    [ChartLegendPosition.Bottom]: 'bottom',
     [ChartLegendPosition.Hidden]: 'hidden',
   }[position]
 }
 </script>
 
 <style lang="scss" scoped>
 @import '../../styles/base';
-.legend-container {
+
+ul.legend-container {
   display: flex;
-  margin: $kui-space-30 0 0 0;
   max-height: inherit;
   -ms-overflow-style: thin;
   overflow-x: hidden;
   overflow-y: auto;
-  padding-left: 0;
+  padding: 0;
 
   @include scrollbarBase;
 
-  &.vertical {
+  &.right {
+    align-items: baseline;
     flex-direction: column;
     justify-content: flex-start;
+    margin: 0 0 0 $kui-space-40;
     max-height: 90%;
-    max-width: 15%;
     min-width: 10%;
-    padding-left: $kui-space-50;
-    row-gap: $kui-space-60;
+    row-gap: $kui-space-40;
+    width: auto;
 
     .truncate-label {
       max-width: 12ch;
@@ -260,63 +260,30 @@ const positionToClass = (position: `${ChartLegendPosition}`) => {
       white-space: nowrap;
     }
 
-    li {
-      // Legend on right side of chart allows for two lines of text
-      .legend {
-        margin-top: $kui-space-20;
-      }
-    }
-
     // Allow legend to expand horizontally at lower resolutions
     @media (max-width: ($kui-breakpoint-phablet - 1px)) {
-      column-gap: $kui-space-50;
-      display: grid;
-      grid-template-columns: repeat(auto-fit, 12ch);
-      height: 40px;
-      justify-content: center;
-      max-width: 99% !important;
-
-      .sub-label {
-        display: none;
-      }
+      margin-left: $kui-space-90;
+      @include legendAsGrid(v-bind('legendHeight'));
     }
   }
 
-  &.horizontal {
-    column-gap: $kui-space-50;
-    display: grid;
-    height: v-bind('legendHeight');
-    justify-content: center;  // Legend below chart only allows one line of text
-    width: 99%;
-    .truncate-label {
-      max-width: 20ch;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    li {
-      align-items: center;
-      margin-top: 0;
-      .label {
-        line-height: $kui-line-height-40;
-        white-space: nowrap;
-      }
-    }
+  &.bottom {
+    height: auto;
+    margin: $kui-space-30 0 0 $kui-space-100;
+    @include legendAsGrid(v-bind('legendHeight'));
   }
 
   // Individual legend item
   li {
     align-items: start;
     cursor: pointer;
     display: flex;
-    line-height: 1;
 
     // Color bar preceding label
-    .legend {
-      flex: 0 0 14px;
-      height: 3px;
-      margin-right: $kui-space-30;
+    .square-marker {
+      height: 9px;
+      margin: 2px $kui-space-20 0 0;
+      width: 9px;
     }
 
     .label {

packages/analytics/analytics-chart/src/components/chart-plugins/ChartTooltip.vue

@@ -225,11 +225,11 @@ function handleMouseUp() {
     padding-bottom: $kui-space-40;
 
     .title {
-      font-size: $kui-font-size-40;
+      font-size: $kui-font-size-30;
       font-weight: $kui-font-weight-semibold;
     }
     .subtitle {
-      font-size: $kui-font-size-30;
+      font-size: $kui-font-size-20;
       margin-top: $kui-space-40;
     }
 
@@ -254,8 +254,9 @@ ul.tooltip {
   @include scrollbarBase;
 
   li {
+    align-items: center;
     display: flex;
-    font-size: $kui-font-size-30;
+    font-size: $kui-font-size-20;
     line-height: 1;
     margin: $kui-space-40;
   }
@@ -280,9 +281,9 @@ ul.tooltip {
   .tooltip-legend {
     display: inline-flex;
     flex-direction: row;
-    height: 15px;
-    margin-right: 8px;
-    width: 3px;
+    height: 12px;
+    margin-right: $kui-space-30;
+    width: 12px;
   }
 }
 </style>

packages/analytics/analytics-chart/src/styles/mixins.scss

@@ -14,4 +14,42 @@
     background-color: $kui-color-background-disabled;
     border-radius: 10px;
   }
+}
+
+@mixin legendAsGrid($max-height) {
+  column-gap: $kui-space-50;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, 12ch);
+  max-height: $max-height;
+  max-width: 99% !important;
+  row-gap: $kui-space-20;
+  width: 99%;
+
+  .label-container {
+    .label {
+      line-height: $kui-line-height-20;
+    }
+
+    .sub-label {
+      display: none;
+    }
+  }
+
+
+  .truncate-label {
+    max-width: 20ch;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  li {
+    align-items: baseline;
+    margin-top: 0;
+
+    .label {
+      line-height: $kui-line-height-40;
+      white-space: nowrap;
+    }
+  }
 }