feat: initial Pezkuwi Apps rebrand from polkadot-apps

Rebranded terminology: - Polkadot → Pezkuwi - Kusama → Dicle - Westend → Zagros - Rococo → PezkuwiChain - Substrate → Bizinikiwi - parachain → teyrchain Custom logos with Kurdistan brand colors (#e6007a → #86e62a): - bizinikiwi-hexagon.svg - sora-bizinikiwi.svg - hezscanner.svg - heztreasury.svg - pezkuwiscan.svg - pezkuwistats.svg - pezkuwiassembly.svg - pezkuwiholic.svg
2026-04-25 20:47:58 +00:00 · 2026-01-07 13:05:27 +03:00
commit d21bfb1320
5867 changed files with 329019 additions and 0 deletions
@@ -0,0 +1,119 @@
+// Copyright 2017-2025 @pezkuwi/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ChartData, ChartOptions, TooltipItem } from 'chart.js';
+import type { BN } from '@pezkuwi/util';
+
+import React, { useEffect, useState } from 'react';
+import { Bar } from 'react-chartjs-2';
+
+import { bnToBn, isNumber } from '@pezkuwi/util';
+
+import { alphaColor } from './utils.js';
+
+interface Value {
+  colors: string[];
+  label: string;
+  tooltip?: string;
+  value: number | BN;
+}
+
+export interface Props {
+  aspectRatio?: number;
+  className?: string;
+  max?: number;
+  showLabels?: boolean;
+  values: Value[];
+  withColors?: boolean;
+}
+
+interface State {
+  chartData?: ChartData;
+  chartOptions?: ChartOptions;
+  jsonValues?: string;
+}
+
+interface Config {
+  labels: string[];
+  datasets: {
+    data: number[];
+    backgroundColor: string[];
+    hoverBackgroundColor: string[];
+  }[];
+}
+
+function calculateOptions (aspectRatio: number, values: Value[], jsonValues: string, max: number, showLabels: boolean): State {
+  const chartData = values.reduce((data, { colors: [normalColor = '#00f', hoverColor], label, value }): Config => {
+    const dataset = data.datasets[0];
+
+    dataset.backgroundColor.push(alphaColor(normalColor));
+    dataset.hoverBackgroundColor.push(alphaColor(hoverColor || normalColor));
+    dataset.data.push(isNumber(value) ? value : bnToBn(value).toNumber());
+    data.labels.push(label);
+
+    return data;
+  }, {
+    datasets: [{
+      backgroundColor: [] as string[],
+      data: [] as number[],
+      hoverBackgroundColor: [] as string[]
+    }],
+    labels: [] as string[]
+  });
+
+  return {
+    chartData,
+    chartOptions: {
+      aspectRatio,
+      plugins: {
+        legend: {
+          display: false
+        },
+        tooltip: {
+          callbacks: {
+            label: (item: TooltipItem<any>): string =>
+              values[item.dataIndex].tooltip || values[item.dataIndex].label
+          }
+        }
+      },
+      scales: {
+        x: showLabels
+          ? { beginAtZero: true, max }
+          : { display: false }
+      }
+    },
+    jsonValues
+  };
+}
+
+function ChartHorizBar ({ aspectRatio = 8, className = '', max = 100, showLabels = false, values }: Props): React.ReactElement<Props> | null {
+  const [{ chartData, chartOptions, jsonValues }, setState] = useState<State>({});
+
+  useEffect((): void => {
+    const newJsonValues = JSON.stringify(values);
+
+    if (newJsonValues !== jsonValues) {
+      setState(calculateOptions(aspectRatio, values, newJsonValues, max, showLabels));
+    }
+  }, [aspectRatio, jsonValues, max, showLabels, values]);
+
+  if (!chartData) {
+    return null;
+  }
+
+  // HACK on width/height to get the aspectRatio to work
+  return (
+    <div className={`${className} ui--Chart-HorizBar`}>
+      <Bar
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        data={chartData as any}
+        height={null as unknown as number}
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        options={chartOptions as any}
+        width={null as unknown as number}
+      />
+    </div>
+  );
+}
+
+export default React.memo(ChartHorizBar);