pixel-react 1.6.6 → 1.6.8

package/src/components/Charts/BarChart/types.ts

@@ -1,12 +1,12 @@
-  
-  export interface BarChartProps {
-    barWidth:number;
-    width: number;
-    height: number;
-    data: Array<{ label: string; value: number;iconName:string}>; 
-    colors?: string[]; 
-    barGap:number;
-    barRadius?: number; 
-    iconSize?:number
-  }
-  
+  
+  export interface BarChartProps {
+    barWidth:number;
+    width: number;
+    height: number;
+    data: Array<{ label: string; value: number;iconName:string}>; 
+    colors?: string[]; 
+    barGap:number;
+    barRadius?: number; 
+    iconSize?:number
+  }
+  

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.scss

@@ -1,157 +1,164 @@
-@use '../../../assets/styles/fonts';
-
-.ff-dashboard-donut-chart-section {
-  display: flex;
-  align-items: center;
-
-  &.legend-position-bottom {
-    flex-direction: column;
-  }
-
-  &.legend-position-left {
-    flex-direction: row-reverse;
-  }
-
-  &-table-legend {
-    flex-direction: row;
-  }
-
-  .ff-dashboard-donut-chart-svg-container {
-    text-align: center;
-    svg {
-      text:nth-of-type(1) {
-        @extend .font2Xl;
-        font-weight: 600;
-      }
-      text:nth-of-type(2) {
-        @extend .fontMd;
-        font-weight: 500;
-      }
-    }
-
-    .ff-donut-chart-tooltip {
-      position: absolute;
-      padding: 5px;
-      border-radius: 4px;
-      pointer-events: none;
-      background-color: var(--tooltip-bg-color);
-      color: var(--tooltip-text-color);
-    }
-  }
-
-  .ff-legend-container {
-    display: grid;
-    gap: 10px;
-    grid-auto-rows: 1fr;
-
-    &.ff-number-legend {
-      grid-template-columns: repeat(3, 100px);
-
-      &.ff-side-legend{
-        grid-template-columns: repeat(2, 100px);
-      }
-      .ff-legend-item {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-      }
-    }
-
-    &.ff-pill-legend {
-      grid-template-columns: repeat(2, 130px);
-
-      .ff-legend-item {
-        display: flex;
-        align-items: center;
-
-        .ff-legend-capsule {
-          background-color: var(--status-success-text-color);
-          color: var(--tooltip-text-color);
-          border-radius: 15px;
-          min-width: 25px;
-          height: 18px;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-        }
-
-        .ff-legend-key {
-          margin-left: 8px;
-        }
-      }
-    }
-
-    &.ff-memory-legend {
-      grid-template-columns: repeat(3, 100px);
-
-      &.ff-side-legend{
-        grid-template-columns: repeat(2, 100px);
-      }
-
-      .ff-legend-item {
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        width: 100%;
-      }
-    }
-  }
-
-  .ff-legend-table-wrapper {
-    overflow: hidden;
-    border: 1px solid var(--border-color);
-    border-radius: 4px;
-    margin-left: 1rem;
-  }
-
-  .ff-legend-table {
-    width: 100%;
-    min-width: 300px;
-    border-collapse: collapse;
-    text-align: left;
-
-    .ff-table-header {
-      @extend .fontXs;
-      font-weight: bold;
-      background-color: var(--tabs-bg-color);
-      color: var(--input-hover-border-color);
-      padding: 0.5rem;
-
-      &:last-child {
-        text-align: right;
-      }
-    }
-
-    .ff-legend-capsule {
-      background-color: var(--status-success-text-color);
-      color: var(--tooltip-text-color);
-      border-radius: 1rem;
-      min-width: 22px;
-      height: 16px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .ff-legend-item {
-      .ff-legend-name,
-      .ff-legend-percentage,
-      .ff-legend-count {
-        padding: 0.5rem;
-        @extend .fontXs;
-        color: var(--input-hover-border-color);
-      }
-
-      .ff-legend-name {
-        display: flex;
-        align-items: baseline;
-        gap: 5px;
-        color: var(--input-hover-border-color);
-      }
-      .ff-legend-count {
-        text-align: right;
-      }
-    }
-  }
-}
+@use '../../../assets/styles/fonts';
+
+.ff-dashboard-donut-chart-section {
+  display: flex;
+  align-items: center;
+
+  &.legend-position-bottom {
+    flex-direction: column;
+  }
+
+  &.legend-position-left {
+    flex-direction: row-reverse;
+  }
+
+  &-table-legend {
+    flex-direction: row;
+  }
+
+  .ff-dashboard-donut-chart-svg-container {
+    text-align: center;
+    svg {
+      display: block;
+      text:nth-of-type(1) {
+        @extend .font2Xl;
+        font-weight: 600;
+      }
+      text:nth-of-type(2) {
+        @extend .fontMd;
+        font-weight: 500;
+      }
+    }
+
+    .ff-donut-chart-tooltip {
+      position: absolute;
+      padding: 5px;
+      border-radius: 4px;
+      pointer-events: none;
+      background-color: var(--tooltip-bg-color);
+      color: var(--tooltip-text-color);
+    }
+  }
+
+  .ff-legend-container {
+    display: grid;
+    grid-auto-rows: 1fr;
+
+    &.ff-number-legend {
+      grid-template-columns: repeat(3, 100px);
+
+      &.ff-side-legend {
+        grid-template-columns: repeat(2, 100px);
+      }
+      .ff-legend-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+    }
+
+    &.ff-pill-legend {
+      grid-template-columns: repeat(2, 130px);
+
+      .ff-legend-item {
+        display: flex;
+        align-items: center;
+
+        .ff-legend-capsule {
+          background-color: var(--status-success-text-color);
+          color: var(--tooltip-text-color);
+          border-radius: 15px;
+          min-width: 25px;
+          height: 18px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .ff-legend-key {
+          margin-left: 8px;
+        }
+      }
+    }
+
+    &.ff-memory-legend {
+      grid-template-columns: repeat(3, 100px);
+
+      &.ff-side-legend {
+        grid-template-columns: repeat(2, 100px);
+      }
+
+      .ff-legend-item {
+        box-sizing: border-box;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: 100%;
+      }
+    }
+  }
+
+  .ff-legend-table-wrapper {
+    overflow: hidden;
+    border: 1px solid var(--border-color);
+    border-radius: 4px;
+    margin-left: 1rem;
+  }
+
+  .ff-legend-table {
+    width: 100%;
+    min-width: 300px;
+    border-collapse: collapse;
+    text-align: left;
+
+    .ff-table-header {
+      @extend .fontXs;
+      font-weight: bold;
+      background-color: var(--tabs-bg-color);
+      color: var(--input-hover-border-color);
+      padding: 0.5rem;
+
+      &:last-child {
+        text-align: right;
+        padding-right: 10px;
+      }
+      &:nth-last-child(2) {
+        width: 58px;
+      }
+    }
+
+    .ff-legend-capsule {
+      background-color: var(--status-success-text-color);
+      color: var(--tooltip-text-color);
+      border-radius: 1rem;
+      min-width: 22px;
+      height: 16px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .ff-legend-item {
+      .ff-legend-name,
+      .ff-legend-percentage,
+      .ff-legend-count {
+        padding: 0.5rem;
+        @extend .fontXs;
+        color: var(--input-hover-border-color);
+        &:last-child {
+          padding-right: 22px;
+        }
+      }
+
+      .ff-legend-name {
+        display: flex;
+        align-items: baseline;
+        gap: 5px;
+        color: var(--input-hover-border-color);
+      }
+      .ff-legend-count {
+        text-align: right;
+      }
+    }
+  }
+}

package/src/components/Charts/DashboardDonutChart/DashboardDonutChart.stories.tsx

@@ -1,54 +1,55 @@
-import { Meta, StoryObj } from '@storybook/react/*';
-import DashboardDonutChart from './DashboardDonutChart';
-
-const meta: Meta<typeof DashboardDonutChart> = {
-  title: 'Components/DashboardDonutChart',
-  component: DashboardDonutChart,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-export default meta;
-
-type Story = StoryObj<typeof DashboardDonutChart>;
-
-export const Default: Story = {
-  args: {
-    radius: 70,
-    lineWidth: 15,
-    legendDetailsType: 'Scripts',
-    isLegendDetails: true,
-    statusValues: [
-      { key: 'Passed', value: 60, color: 'var(--status-success-text-color)' },
-      { key: 'failed', value: 20, color: 'var(--status-rejected-text-color)' },
-      { key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
-      { key: 'skipped', value: 10, color: 'var(--status-button-text-skipped)' },
-    ],
-    gapAngle: 0,
-    legendType: 'numberLegend',
-    showOnlyLabel: false,
-  },
-};
-
-export const MemoryLegend: Story = {
-  args: {
-    radius: 65,
-    lineWidth: 15,
-    legendDetailsType: 'Memory',
-    isLegendDetails: true,
-    statusValues: [
-      {
-        key: 'Total Available Memory',
-        value: '37.5 KB',
-        color: 'var(--status-warning-text-color)',
-      },
-      { key: 'Used Memory', value: '72.5 KB', color: 'var(--brand-color)' },
-      { key: 'Screenshots', value: '30.5 KB', color: 'blue' },
-      { key: 'Videos', value: '146.7 KB', color: 'yellow' },
-      { key: 'Program element', value: '2.1 MB', color: 'green' },
-    ],
-    gapAngle: 0,
-    legendType: 'memoryLegend',
-  },
-};
+import { Meta, StoryObj } from '@storybook/react';
+import DashboardDonutChart from './DashboardDonutChart';
+
+const meta: Meta<typeof DashboardDonutChart> = {
+  title: 'Components/DashboardDonutChart',
+  component: DashboardDonutChart,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof DashboardDonutChart>;
+
+export const Default: Story = {
+  args: {
+    radius: 70,
+    lineWidth: 15,
+    tableWidth: 500,
+    legendDetailsType: 'Scripts',
+    isLegendDetails: true,
+    statusValues: [
+      { key: 'Passed', value: 60, color: 'var(--status-success-text-color)' },
+      { key: 'failed', value: 20, color: 'var(--status-rejected-text-color)' },
+      { key: 'Warning', value: 10, color: 'var(--status-warning-text-color)' },
+      { key: 'skipped', value: 10, color: 'var(--status-button-text-skipped)' },
+    ],
+    gapAngle: 0,
+    legendType: 'numberLegend',
+    showOnlyLabel: false,
+  },
+};
+
+export const MemoryLegend: Story = {
+  args: {
+    radius: 65,
+    lineWidth: 15,
+    legendDetailsType: 'Memory',
+    isLegendDetails: true,
+    statusValues: [
+      {
+        key: 'Total Available Memory',
+        value: '37.5 KB',
+        color: 'var(--status-warning-text-color)',
+      },
+      { key: 'Used Memory', value: '72.5 KB', color: 'var(--brand-color)' },
+      { key: 'Screenshots', value: '30.5 KB', color: 'blue' },
+      { key: 'Videos', value: '146.7 KB', color: 'yellow' },
+      { key: 'Program element', value: '2.1 MB', color: 'green' },
+    ],
+    gapAngle: 0,
+    legendType: 'memoryLegend',
+  },
+};