format

2023-10-06 11:14:09 +03:00 · 2023-10-06 11:14:09 +03:00 · d9115e2a81
parent b364d77b02
commit d9115e2a81
5 changed files with 176 additions and 164 deletions
--- a/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
+++ b/src/pages/Dashboard/ConsensusUptime/ConsensusUptimeCard.tsx
@ -4,10 +4,8 @@ import { Stack, XStack, YStack } from 'tamagui'
 import UptimeChart from '../UptimeChart/UptimeChart'
 import Icon from '../../../components/General/Icon'

- 
-
 const ConsensusUptimeCard = () => {
-  const monthlyActivity = [3,0,5,4,6,7,8,9,10,1,2,3]
+  const monthlyActivity = [3, 0, 5, 4, 6, 7, 8, 9, 10, 1, 2, 3]
  return (
    <Shadow
      variant="$2"
@ -41,7 +39,12 @@ const ConsensusUptimeCard = () => {
              height: '100%',
            }}
          >
-            <UptimeChart monthlyActivity={monthlyActivity} startMonth={0} endMonth={1} withLabels={false}/>
+            <UptimeChart
+              monthlyActivity={monthlyActivity}
+              startMonth={0}
+              endMonth={1}
+              withLabels={false}
+            />
          </Stack>
        </XStack>
      </YStack>
--- a/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
+++ b/src/pages/Dashboard/DeviceUptime/DeviceUptime.tsx
@ -7,7 +7,6 @@ import UptimeChart from '../UptimeChart/UptimeChart'
 import Icon from '../../../components/General/Icon'
 import { getMonthIndicesFromRange } from '../../../utilities'

-
 const DeviceUptime = () => {
  const [isCalendarVisible, setIsCalendarVisible] = useState(false)
  const [dateRange, setDateRange] = useState<DateRange>({ from: undefined, to: undefined })
@ -96,7 +95,12 @@ const DeviceUptime = () => {
              height: '100%',
            }}
          >
-            <UptimeChart startMonth={startMonth} endMonth={endMonth} monthlyActivity={[10, 1, 3, 4, 5, 1, 7, 1,6, 3, 1, 9]} withLabels={true}/>
+            <UptimeChart
+              startMonth={startMonth}
+              endMonth={endMonth}
+              monthlyActivity={[10, 1, 3, 4, 5, 1, 7, 1, 6, 3, 1, 9]}
+              withLabels={true}
+            />
          </Stack>
        </XStack>
      </YStack>
--- a/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
+++ b/src/pages/Dashboard/ExecutionUptime/ExecutionUptime.tsx
@ -3,10 +3,9 @@ import { Stack, XStack, YStack } from 'tamagui'

 import Icon from '../../../components/General/Icon'
 import UptimeChart from '../UptimeChart/UptimeChart'
- 
- 
+
 const ExecutionUptime = () => {
-  const monthlyActivity = [3,0,5,4,6,7,0,9,10,1,2,3]
+  const monthlyActivity = [3, 0, 5, 4, 6, 7, 0, 9, 10, 1, 2, 3]
  return (
    <Shadow
      variant="$2"
@ -40,7 +39,12 @@ const ExecutionUptime = () => {
              height: '100%',
            }}
          >
-            <UptimeChart monthlyActivity={monthlyActivity} startMonth={0} endMonth={8} withLabels={false} />
+            <UptimeChart
+              monthlyActivity={monthlyActivity}
+              startMonth={0}
+              endMonth={8}
+              withLabels={false}
+            />
          </Stack>
        </XStack>
      </YStack>
--- a/src/pages/Dashboard/UptimeChart/UptimeChart.stories.tsx
+++ b/src/pages/Dashboard/UptimeChart/UptimeChart.stories.tsx
@ -23,7 +23,9 @@ type Story = StoryObj<typeof meta>

 export const WithMonths: Story = {
  args: {
-
-    monthlyActivity:[3, 2, 5, 4, 6, 7, 8, 0, 10, 0, 0, 3], startMonth: 0, endMonth: 12, withLabels: true
+    monthlyActivity: [3, 2, 5, 4, 6, 7, 8, 0, 10, 0, 0, 3],
+    startMonth: 0,
+    endMonth: 12,
+    withLabels: true,
  },
 }
--- a/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
+++ b/src/pages/Dashboard/UptimeChart/UptimeChart.tsx
@ -1,214 +1,213 @@
-import { BarChart, Bar, ResponsiveContainer, XAxis } from 'recharts';
+import { BarChart, Bar, ResponsiveContainer, XAxis } from 'recharts'

 const data: DataItem[] = [
  {
    name: 'Jan',
-    'one': 1,
-    'two': 1,
-    'three': 1,
-    'four': 1,
-    'five': 1,
-    'six': 1,
-    'seven': 1,
-    'eight': 1,
-    'nine': 1,
-    'ten': 1,
+    one: 1,
+    two: 1,
+    three: 1,
+    four: 1,
+    five: 1,
+    six: 1,
+    seven: 1,
+    eight: 1,
+    nine: 1,
+    ten: 1,
  },
  {
    name: 'Feb',
-    'one': 1,
-    'two': 1,
-    'three': 1,
-    'four': 1,
-    'five': 1,
-    'six': 1,
-    'seven': 1,
-    'eight': 1,
-    'nine': 1,
-    'ten': 1,
+    one: 1,
+    two: 1,
+    three: 1,
+    four: 1,
+    five: 1,
+    six: 1,
+    seven: 1,
+    eight: 1,
+    nine: 1,
+    ten: 1,
  },
  {
    name: 'Mar',
-    'one': 1,
-    'two': 1,
-    'three': 1,
-    'four': 1,
-    'five': 1,
-    'six': 1,
-    'seven': 1,
-    'eight': 1,
-    'nine': 1,
-    'ten': 1,
+    one: 1,
+    two: 1,
+    three: 1,
+    four: 1,
+    five: 1,
+    six: 1,
+    seven: 1,
+    eight: 1,
+    nine: 1,
+    ten: 1,
  },
  {
    name: 'Apr',
-    'one': 1,
-    'two': 1,
-    'three': 1,
-    'four': 1,
-    'five': 1,
-    'six': 1,
-    'seven': 1,
-    'eight': 1,
-    'nine': 1,
-    'ten': 1,
+    one: 1,
+    two: 1,
+    three: 1,
+    four: 1,
+    five: 1,
+    six: 1,
+    seven: 1,
+    eight: 1,
+    nine: 1,
+    ten: 1,
  },
  {
    name: 'May',
-    'one': 1,
-    'two': 1,
-    'three': 1,
-    'four': 1,
-    'five': 1,
-    'six': 1,
-    'seven': 1,
-    'eight': 1,
-    'nine': 1,
-    'ten': 1,
+    one: 1,
+    two: 1,
+    three: 1,
+    four: 1,
+    five: 1,
+    six: 1,
+    seven: 1,
+    eight: 1,
+    nine: 1,
+    ten: 1,
  },

  {
    name: 'Jun',
-    'one': 1,
-    'two': 1,
-    'three': 1,
-    'four': 1,
-    'five': 1,
-    'six': 1,
-    'seven': 1,
-    'eight': 1,
-    'nine': 1,
-    'ten': 1,
+    one: 1,
+    two: 1,
+    three: 1,
+    four: 1,
+    five: 1,
+    six: 1,
+    seven: 1,
+    eight: 1,
+    nine: 1,
+    ten: 1,
  },
  {
    name: 'Jul',
-    'one': 1,
-    'two': 1,
-    'three': 1,
-    'four': 1,
-    'five': 1,
-    'six': 1,
-    'seven': 1,
-    'eight': 1,
-    'nine': 1,
-    'ten': 1,
+    one: 1,
+    two: 1,
+    three: 1,
+    four: 1,
+    five: 1,
+    six: 1,
+    seven: 1,
+    eight: 1,
+    nine: 1,
+    ten: 1,
  },
  {
    name: 'Aug',
-    'one': 1,
-    'two': 1,
-    'three': 1,
-    'four': 1,
-    'five': 1,
-    'six': 1,
-    'seven': 1,
-    'eight': 1,
-    'nine': 1,
-    'ten': 1,
+    one: 1,
+    two: 1,
+    three: 1,
+    four: 1,
+    five: 1,
+    six: 1,
+    seven: 1,
+    eight: 1,
+    nine: 1,
+    ten: 1,
  },
  {
    name: 'Sep',
-    'one': 1,
-    'two': 1,
-    'three': 1,
-    'four': 1,
-    'five': 1,
-    'six': 1,
-    'seven': 1,
-    'eight': 1,
-    'nine': 1,
-    'ten': 1,
+    one: 1,
+    two: 1,
+    three: 1,
+    four: 1,
+    five: 1,
+    six: 1,
+    seven: 1,
+    eight: 1,
+    nine: 1,
+    ten: 1,
  },
  {
    name: 'Oct',
-    'one': 1,
-    'two': 1,
-    'three': 1,
-    'four': 1,
-    'five': 1,
-    'six': 1,
-    'seven': 1,
-    'eight': 1,
-    'nine': 1,
-    'ten': 1,
+    one: 1,
+    two: 1,
+    three: 1,
+    four: 1,
+    five: 1,
+    six: 1,
+    seven: 1,
+    eight: 1,
+    nine: 1,
+    ten: 1,
  },
  {
    name: 'Nov',
-    'one': 1,
-    'two': 1,
-    'three': 1,
-    'four': 1,
-    'five': 1,
-    'six': 1,
-    'seven': 1,
-    'eight': 1,
-    'nine': 1,
-    'ten': 1,
+    one: 1,
+    two: 1,
+    three: 1,
+    four: 1,
+    five: 1,
+    six: 1,
+    seven: 1,
+    eight: 1,
+    nine: 1,
+    ten: 1,
  },
  {
    name: 'Dec',
-    'one': 0,
-    'two': 0,
-    'three': 0,
-    'four': 0,
-    'five': 0,
-    'six': 0,
-    'seven': 0,
-    'eight': 0,
-    'nine': 0,
-    'ten': 0,
+    one: 0,
+    two: 0,
+    three: 0,
+    four: 0,
+    five: 0,
+    six: 0,
+    seven: 0,
+    eight: 0,
+    nine: 0,
+    ten: 0,
  },
 ]

 type DataItem = {
-  name: string;
-  one: number;
-  two: number;
-  three: number;
-  four: number;
-  five: number;
-  six: number;
-  seven: number;
-  eight: number;
-  nine: number;
-  ten: number;
-};
+  name: string
+  one: number
+  two: number
+  three: number
+  four: number
+  five: number
+  six: number
+  seven: number
+  eight: number
+  nine: number
+  ten: number
+}

 type UptimeChartProps = {
-  monthlyActivity: number[];
-  startMonth: number;
-  endMonth: number;
-  withLabels: boolean;
-};
+  monthlyActivity: number[]
+  startMonth: number
+  endMonth: number
+  withLabels: boolean
+}

 const updateMonthlyValues = (data: any, monthlyActivity: any) => {
  if (!Array.isArray(monthlyActivity) || monthlyActivity.length !== 12) {
-    console.error("monthlyActivity should be an array with 12 values");
-    return;
+    console.error('monthlyActivity should be an array with 12 values')
+    return
  }

-  const keys = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten'];
+  const keys = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten']

  for (let i = 0; i < data.length; i++) {
-    const month = data[i];
-    const activity = monthlyActivity[i];
+    const month = data[i]
+    const activity = monthlyActivity[i]

    for (let j = 0; j < keys.length; j++) {
      if (j < activity) {
-        month[keys[j]] = 1;
+        month[keys[j]] = 1
      } else {
-        month[keys[j]] = 0;
+        month[keys[j]] = 0
      }
    }
  }
-  return data;
+  return data
 }

 const UptimeChart = ({ monthlyActivity, startMonth, endMonth, withLabels }: UptimeChartProps) => {
-
-  const updatedData = updateMonthlyValues(data, monthlyActivity);
+  const updatedData = updateMonthlyValues(data, monthlyActivity)
  console.log(updatedData)
-  const filteredData = data.slice(startMonth, endMonth + 1);
+  const filteredData = data.slice(startMonth, endMonth + 1)

  filteredData
  return (
@ -227,7 +226,7 @@ const UptimeChart = ({ monthlyActivity, startMonth, endMonth, withLabels }: Upti
        {withLabels && <XAxis dataKey="name" fontSize={'10px'} tickMargin={10} />}
      </BarChart>
    </ResponsiveContainer>
-  );
-};
+  )
+}

-export default UptimeChart;
+export default UptimeChart