mirror of
https://github.com/gosticks/plane.git
synced 2025-10-16 12:45:33 +00:00
[WEB-4855] refactor: chart tick improvements (#7732)
* 🚧 WIP: Introduced customTicks prop in BarChart for flexible tick rendering. * ✨ feat: added customTicks to axis charts for flexible tick rendering * 🔧 fix: update default bar fill color to black and ensure consistent color usage in BarChart * ✨ feat: add customTooltipContent prop to LineChart for enhanced tooltip flexibility * 🔧 fix: update bar fill color handling to support dynamic colors based on data and removed DEFAULT_BAR_FILL_COLOR * 🔧 fix: correct bar fill color handling in BarChart to ensure proper color assignment for tooltips * 🔧 fix: update customTicks prop types in TAxisChartProps to use unknown type for better type safety * 📝 chore: updated translations and cleaned up insight card * 🚨 fix: lint * 🔧 fix: remove unused translation key "no_of" from Russian translations
This commit is contained in:
Jayash Tripathy
GitHub
parent
498613284e
commit
43b7a6ad0a
@ -1,28 +1,17 @@
|
||||
// plane package imports
|
||||
import React, { useMemo } from "react";
|
||||
import React from "react";
|
||||
import { IAnalyticsResponseFields } from "@plane/types";
|
||||
import { Loader } from "@plane/ui";
|
||||
// components
|
||||
import TrendPiece from "./trend-piece";
|
||||
|
||||
export type InsightCardProps = {
|
||||
data?: IAnalyticsResponseFields;
|
||||
label: string;
|
||||
isLoading?: boolean;
|
||||
versus?: string | null;
|
||||
};
|
||||
|
||||
const InsightCard = (props: InsightCardProps) => {
|
||||
const { data, label, isLoading, versus } = props;
|
||||
const { count, filter_count } = data || {};
|
||||
const percentage = useMemo(() => {
|
||||
if (count != null && filter_count != null) {
|
||||
const result = ((count - filter_count) / count) * 100;
|
||||
const isFiniteAndNotNaNOrZero = Number.isFinite(result) && !Number.isNaN(result) && result !== 0;
|
||||
return isFiniteAndNotNaNOrZero ? result : null;
|
||||
}
|
||||
return null;
|
||||
}, [count, filter_count]);
|
||||
const { data, label, isLoading = false } = props;
|
||||
const count = data?.count ?? 0;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
@ -30,12 +19,6 @@ const InsightCard = (props: InsightCardProps) => {
|
||||
{!isLoading ? (
|
||||
<div className="flex flex-col gap-1">
|
||||
<div className="text-2xl font-bold text-custom-text-100">{count}</div>
|
||||
{/* {percentage && (
|
||||
<div className="flex gap-1 text-xs text-custom-text-300">
|
||||
<TrendPiece percentage={percentage} size="xs" />
|
||||
{versus && <div>vs {versus}</div>}
|
||||
</div>
|
||||
)} */}
|
||||
</div>
|
||||
) : (
|
||||
<Loader.Item height="50px" width="100%" />
|
||||
|
||||
@ -92,7 +92,6 @@ const TotalInsights: React.FC<{
|
||||
isLoading={isLoading}
|
||||
data={totalInsightsData?.[item.key]}
|
||||
label={getInsightLabel(analyticsType, item, isEpic, t)}
|
||||
versus={selectedDurationLabel}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@ -882,7 +882,8 @@
|
||||
"in_progress": "Probíhá",
|
||||
"planned": "Plánováno",
|
||||
"paused": "Pozastaveno",
|
||||
"no_of": "Počet {entity}"
|
||||
"no_of": "Počet {entity}",
|
||||
"resolved": "Vyřešeno"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "Osa X",
|
||||
@ -2490,7 +2491,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane se nespustil. To může být způsobeno tím, že se jeden nebo více služeb Plane nepodařilo spustit.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Vyberte View Logs z setup.sh a Docker logů, abyste si byli jisti."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -882,7 +882,8 @@
|
||||
"in_progress": "In Bearbeitung",
|
||||
"planned": "Geplant",
|
||||
"paused": "Pausiert",
|
||||
"no_of": "Anzahl {entity}"
|
||||
"no_of": "Anzahl {entity}",
|
||||
"resolved": "Gelöst"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "X-Achse",
|
||||
@ -2489,7 +2490,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane ist nicht gestartet. Dies könnte daran liegen, dass einer oder mehrere Plane-Services nicht starten konnten.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Wählen Sie View Logs aus setup.sh und Docker-Logs, um sicherzugehen."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -725,7 +725,8 @@
|
||||
"apply": "Apply",
|
||||
"applying": "Applying",
|
||||
"overview": "Overview",
|
||||
"no_of": "No. of {entity}"
|
||||
"no_of": "No. of {entity}",
|
||||
"resolved": "Resolved"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "X-axis",
|
||||
@ -2366,7 +2367,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane didn't start up. This could be because one or more Plane services failed to start.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Choose View Logs from setup.sh and Docker logs to be sure."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -885,7 +885,8 @@
|
||||
"in_progress": "En progreso",
|
||||
"planned": "Planificado",
|
||||
"paused": "Pausado",
|
||||
"no_of": "N.º de {entity}"
|
||||
"no_of": "N.º de {entity}",
|
||||
"resolved": "Resuelto"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "Eje X",
|
||||
@ -2492,7 +2493,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane no se inició. Esto podría deberse a que uno o más servicios de Plane fallaron al iniciar.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Selecciona View Logs desde setup.sh y los logs de Docker para estar seguro."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -883,7 +883,8 @@
|
||||
"in_progress": "En cours",
|
||||
"planned": "Planifié",
|
||||
"paused": "En pause",
|
||||
"no_of": "Nº de {entity}"
|
||||
"no_of": "Nº de {entity}",
|
||||
"resolved": "Résolu"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "Axe X",
|
||||
@ -2490,7 +2491,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane n'a pas démarré. Cela pourrait être dû au fait qu'un ou plusieurs services Plane ont échoué à démarrer.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Choisissez View Logs depuis setup.sh et les logs Docker pour en être sûr."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -882,7 +882,8 @@
|
||||
"in_progress": "Sedang berlangsung",
|
||||
"planned": "Direncanakan",
|
||||
"paused": "Dijedaikan",
|
||||
"no_of": "Jumlah {entity}"
|
||||
"no_of": "Jumlah {entity}",
|
||||
"resolved": "Terselesaikan"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "Sumbu-X",
|
||||
@ -2485,7 +2486,6 @@
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Pilih View Logs dari setup.sh dan log Docker untuk memastikan."
|
||||
},
|
||||
"no_of": "Jumlah {entity}",
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -881,7 +881,8 @@
|
||||
"in_progress": "In corso",
|
||||
"planned": "Pianificato",
|
||||
"paused": "In pausa",
|
||||
"no_of": "N. di {entity}"
|
||||
"no_of": "N. di {entity}",
|
||||
"resolved": "Risolto"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "Asse X",
|
||||
@ -2489,7 +2490,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane non si è avviato. Questo potrebbe essere dovuto al fatto che uno o più servizi Plane non sono riusciti ad avviarsi.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Scegli View Logs da setup.sh e dai log Docker per essere sicuro."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -883,7 +883,8 @@
|
||||
"in_progress": "進行中",
|
||||
"planned": "計画済み",
|
||||
"paused": "一時停止",
|
||||
"no_of": "{entity} の数"
|
||||
"no_of": "{entity} の数",
|
||||
"resolved": "解決済み"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "エックス アクシス",
|
||||
@ -2490,7 +2491,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Planeが起動しませんでした。これは1つまたは複数のPlaneサービスの起動に失敗したことが原因である可能性があります。",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "setup.shとDockerログからView Logsを選択して確認してください。"
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -884,7 +884,8 @@
|
||||
"in_progress": "진행 중",
|
||||
"planned": "계획된",
|
||||
"paused": "일시 중지됨",
|
||||
"no_of": "{entity} 수"
|
||||
"no_of": "{entity} 수",
|
||||
"resolved": "해결됨"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "X축",
|
||||
@ -2492,7 +2493,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane이 시작되지 않았습니다. 이는 하나 이상의 Plane 서비스가 시작에 실패했기 때문일 수 있습니다.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "확실히 하려면 setup.sh와 Docker 로그에서 View Logs를 선택하세요."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -884,7 +884,8 @@
|
||||
"in_progress": "W trakcie",
|
||||
"planned": "Zaplanowane",
|
||||
"paused": "Wstrzymane",
|
||||
"no_of": "Liczba {entity}"
|
||||
"no_of": "Liczba {entity}",
|
||||
"resolved": "Rozwiązane"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "Oś X",
|
||||
@ -2491,7 +2492,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane nie uruchomił się. Może to być spowodowane tym, że jedna lub więcej usług Plane nie mogła się uruchomić.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Wybierz View Logs z setup.sh i logów Docker, aby mieć pewność."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -884,7 +884,8 @@
|
||||
"in_progress": "Em andamento",
|
||||
"planned": "Planejado",
|
||||
"paused": "Pausado",
|
||||
"no_of": "Nº de {entity}"
|
||||
"no_of": "Nº de {entity}",
|
||||
"resolved": "Resolvido"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "Eixo X",
|
||||
@ -2486,7 +2487,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "O Plane não inicializou. Isso pode ser porque um ou mais serviços do Plane falharam ao iniciar.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Escolha View Logs do setup.sh e logs do Docker para ter certeza."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -882,7 +882,8 @@
|
||||
"in_progress": "În desfășurare",
|
||||
"planned": "Planificat",
|
||||
"paused": "Pauzat",
|
||||
"no_of": "Nr. de {entity}"
|
||||
"no_of": "Nr. de {entity}",
|
||||
"resolved": "Rezolvat"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "axa-X",
|
||||
@ -2484,7 +2485,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane nu a pornit. Aceasta ar putea fi din cauza că unul sau mai multe servicii Plane au eșuat să pornească.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Alegeți View Logs din setup.sh și logurile Docker pentru a fi siguri."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -884,7 +884,8 @@
|
||||
"in_progress": "В процессе",
|
||||
"planned": "Запланировано",
|
||||
"paused": "На паузе",
|
||||
"no_of": "Количество {entity}"
|
||||
"no_of": "Количество {entity}",
|
||||
"resolved": "Решено"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "Ось X",
|
||||
@ -2492,8 +2493,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane не запустился. Это может быть из-за того, что один или несколько сервисов Plane не смогли запуститься.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Выберите View Logs из setup.sh и логов Docker, чтобы убедиться."
|
||||
},
|
||||
"no_of": "Количество {entity}",
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
@ -2533,4 +2532,4 @@
|
||||
"close_button": "Закрыть панель навигации",
|
||||
"outline_floating_button": "Открыть структуру"
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -884,7 +884,8 @@
|
||||
"in_progress": "Prebieha",
|
||||
"planned": "Plánované",
|
||||
"paused": "Pozastavené",
|
||||
"no_of": "Počet {entity}"
|
||||
"no_of": "Počet {entity}",
|
||||
"resolved": "Vyriešené"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "Os X",
|
||||
@ -2491,7 +2492,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane sa nespustil. Toto môže byť spôsobené tým, že sa jedna alebo viac služieb Plane nepodarilo spustiť.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Vyberte View Logs z setup.sh a Docker logov, aby ste si boli istí."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -886,7 +886,8 @@
|
||||
"in_progress": "Devam ediyor",
|
||||
"planned": "Planlandı",
|
||||
"paused": "Durduruldu",
|
||||
"no_of": "{entity} sayısı"
|
||||
"no_of": "{entity} sayısı",
|
||||
"resolved": "Çözüldü"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "X ekseni",
|
||||
@ -2471,7 +2472,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane başlatılamadı. Bu, bir veya daha fazla Plane servisinin başlatılamaması nedeniyle olabilir.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Emin olmak için setup.sh ve Docker loglarından View Logs'u seçin."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -884,7 +884,8 @@
|
||||
"in_progress": "В процесі",
|
||||
"planned": "Заплановано",
|
||||
"paused": "Призупинено",
|
||||
"no_of": "Кількість {entity}"
|
||||
"no_of": "Кількість {entity}",
|
||||
"resolved": "Вирішено"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "Вісь X",
|
||||
@ -2491,7 +2492,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane не запустився. Це може бути через те, що один або декілька сервісів Plane не змогли запуститися.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Виберіть View Logs з setup.sh та логів Docker, щоб переконатися."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -883,7 +883,8 @@
|
||||
"in_progress": "Đang tiến hành",
|
||||
"planned": "Đã lên kế hoạch",
|
||||
"paused": "Tạm dừng",
|
||||
"no_of": "Số lượng {entity}"
|
||||
"no_of": "Số lượng {entity}",
|
||||
"resolved": "Đã giải quyết"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "Trục X",
|
||||
@ -2489,7 +2490,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane không khởi động được. Điều này có thể do một hoặc nhiều dịch vụ Plane không khởi động được.",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "Chọn View Logs từ setup.sh và log Docker để chắc chắn."
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -883,7 +883,8 @@
|
||||
"in_progress": "进行中",
|
||||
"planned": "已计划",
|
||||
"paused": "暂停",
|
||||
"no_of": "{entity} 的数量"
|
||||
"no_of": "{entity} 的数量",
|
||||
"resolved": "已解决"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "X轴",
|
||||
@ -2471,7 +2472,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane 未能启动。这可能是因为一个或多个 Plane 服务启动失败。",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "请选择“查看日志”来查看 setup.sh 和 Docker 日志，以确认问题。"
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -884,7 +884,8 @@
|
||||
"planned": "已計劃",
|
||||
"paused": "暫停",
|
||||
"at_risk": "有風險",
|
||||
"no_of": "{entity} 的數量"
|
||||
"no_of": "{entity} 的數量",
|
||||
"resolved": "已解決"
|
||||
},
|
||||
"chart": {
|
||||
"x_axis": "X 軸",
|
||||
@ -2492,7 +2493,6 @@
|
||||
"plane_didnt_start_up_this_could_be_because_one_or_more_plane_services_failed_to_start": "Plane 未能啟動。這可能是因為一個或多個 Plane 服務啟動失敗。",
|
||||
"choose_view_logs_from_setup_sh_and_docker_logs_to_be_sure": "從 setup.sh 和 Docker 日誌中選擇 View Logs 來確認。"
|
||||
},
|
||||
|
||||
"page_navigation_pane": {
|
||||
"tabs": {
|
||||
"outline": {
|
||||
|
||||
@ -23,6 +23,7 @@ export const AreaChart = React.memo(<K extends string, T extends string>(props:
|
||||
x: undefined,
|
||||
y: 10,
|
||||
},
|
||||
customTicks,
|
||||
showTooltip = true,
|
||||
comparisonLine,
|
||||
} = props;
|
||||
@ -114,7 +115,10 @@ export const AreaChart = React.memo(<K extends string, T extends string>(props:
|
||||
<CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
|
||||
<XAxis
|
||||
dataKey={xAxis.key}
|
||||
tick={(props) => <CustomXAxisTick {...props} />}
|
||||
tick={(props) => {
|
||||
const TickComponent = customTicks?.x || CustomXAxisTick;
|
||||
return <TickComponent {...props} />;
|
||||
}}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
label={
|
||||
@ -140,7 +144,10 @@ export const AreaChart = React.memo(<K extends string, T extends string>(props:
|
||||
className: AXIS_LABEL_CLASSNAME,
|
||||
}
|
||||
}
|
||||
tick={(props) => <CustomYAxisTick {...props} />}
|
||||
tick={(props) => {
|
||||
const TickComponent = customTicks?.y || CustomYAxisTick;
|
||||
return <TickComponent {...props} />;
|
||||
}}
|
||||
tickCount={tickCount.y}
|
||||
allowDecimals={!!yAxis.allowDecimals}
|
||||
/>
|
||||
|
||||
@ -35,6 +35,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
|
||||
x: undefined,
|
||||
y: 10,
|
||||
},
|
||||
customTicks,
|
||||
showTooltip = true,
|
||||
customTooltipContent,
|
||||
} = props;
|
||||
@ -52,7 +53,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
|
||||
keys.push(bar.key);
|
||||
labels[bar.key] = bar.label;
|
||||
// For tooltip, we need a string color. If fill is a function, use a default color
|
||||
colors[bar.key] = typeof bar.fill === "function" ? "#000000" : bar.fill;
|
||||
colors[bar.key] = typeof bar.fill === "function" ? bar.fill({}) : bar.fill;
|
||||
}
|
||||
|
||||
return { stackKeys: keys, stackLabels: labels, stackDotColors: colors };
|
||||
@ -65,6 +66,7 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
|
||||
key={bar.key}
|
||||
dataKey={bar.key}
|
||||
stackId={bar.stackId}
|
||||
fill={typeof bar.fill === "function" ? bar.fill({}) : bar.fill}
|
||||
opacity={!!activeLegend && activeLegend !== bar.key ? 0.1 : 1}
|
||||
shape={(shapeProps: any) => {
|
||||
const shapeVariant = barShapeVariants[bar.shapeVariant ?? "bar"];
|
||||
@ -96,7 +98,10 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
|
||||
<CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
|
||||
<XAxis
|
||||
dataKey={xAxis.key}
|
||||
tick={(props) => <CustomXAxisTick {...props} />}
|
||||
tick={(props) => {
|
||||
const TickComponent = customTicks?.x || CustomXAxisTick;
|
||||
return <TickComponent {...props} />;
|
||||
}}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
label={{
|
||||
@ -118,7 +123,10 @@ export const BarChart = React.memo(<K extends string, T extends string>(props: T
|
||||
dx: yAxis.dx ?? -16,
|
||||
className: AXIS_LABEL_CLASSNAME,
|
||||
}}
|
||||
tick={(props) => <CustomYAxisTick {...props} />}
|
||||
tick={(props) => {
|
||||
const TickComponent = customTicks?.y || CustomYAxisTick;
|
||||
return <TickComponent {...props} />;
|
||||
}}
|
||||
tickCount={tickCount.y}
|
||||
allowDecimals={!!yAxis.allowDecimals}
|
||||
/>
|
||||
|
||||
@ -32,8 +32,10 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
|
||||
x: undefined,
|
||||
y: 10,
|
||||
},
|
||||
customTicks,
|
||||
legend,
|
||||
showTooltip = true,
|
||||
customTooltipContent,
|
||||
} = props;
|
||||
// states
|
||||
const [activeLine, setActiveLine] = useState<string | null>(null);
|
||||
@ -100,7 +102,10 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
|
||||
<CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
|
||||
<XAxis
|
||||
dataKey={xAxis.key}
|
||||
tick={(props) => <CustomXAxisTick {...props} />}
|
||||
tick={(props) => {
|
||||
const TickComponent = customTicks?.x || CustomXAxisTick;
|
||||
return <TickComponent {...props} />;
|
||||
}}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
label={
|
||||
@ -126,7 +131,10 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
|
||||
className: AXIS_LABEL_CLASSNAME,
|
||||
}
|
||||
}
|
||||
tick={(props) => <CustomYAxisTick {...props} />}
|
||||
tick={(props) => {
|
||||
const TickComponent = customTicks?.y || CustomYAxisTick;
|
||||
return <TickComponent {...props} />;
|
||||
}}
|
||||
tickCount={tickCount.y}
|
||||
allowDecimals={!!yAxis.allowDecimals}
|
||||
/>
|
||||
@ -148,17 +156,20 @@ export const LineChart = React.memo(<K extends string, T extends string>(props:
|
||||
wrapperStyle={{
|
||||
pointerEvents: "auto",
|
||||
}}
|
||||
content={({ active, label, payload }) => (
|
||||
<CustomTooltip
|
||||
active={active}
|
||||
activeKey={activeLine}
|
||||
label={label}
|
||||
payload={payload}
|
||||
itemKeys={itemKeys}
|
||||
itemLabels={itemLabels}
|
||||
itemDotColors={itemDotColors}
|
||||
/>
|
||||
)}
|
||||
content={({ active, label, payload }) => {
|
||||
if (customTooltipContent) return customTooltipContent({ active, label, payload });
|
||||
return (
|
||||
<CustomTooltip
|
||||
active={active}
|
||||
activeKey={activeLine}
|
||||
label={label}
|
||||
payload={payload}
|
||||
itemKeys={itemKeys}
|
||||
itemLabels={itemLabels}
|
||||
itemDotColors={itemDotColors}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{renderLines}
|
||||
|
||||
@ -28,6 +28,7 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
|
||||
xAxis,
|
||||
yAxis,
|
||||
className,
|
||||
customTicks,
|
||||
tickCount = {
|
||||
x: undefined,
|
||||
y: 10,
|
||||
@ -85,7 +86,10 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
|
||||
<CartesianGrid stroke="rgba(var(--color-border-100), 0.8)" vertical={false} />
|
||||
<XAxis
|
||||
dataKey={xAxis.key}
|
||||
tick={(props) => <CustomXAxisTick {...props} />}
|
||||
tick={(props) => {
|
||||
const TickComponent = customTicks?.x || CustomXAxisTick;
|
||||
return <TickComponent {...props} />;
|
||||
}}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
label={
|
||||
@ -111,7 +115,10 @@ export const ScatterChart = React.memo(<K extends string, T extends string>(prop
|
||||
className: AXIS_LABEL_CLASSNAME,
|
||||
}
|
||||
}
|
||||
tick={(props) => <CustomYAxisTick {...props} />}
|
||||
tick={(props) => {
|
||||
const TickComponent = customTicks?.y || CustomYAxisTick;
|
||||
return <TickComponent {...props} />;
|
||||
}}
|
||||
tickCount={tickCount.y}
|
||||
allowDecimals={!!yAxis.allowDecimals}
|
||||
/>
|
||||
|
||||
@ -21,8 +21,17 @@ export type TChartData<K extends string, T extends string> = {
|
||||
[key in K]: string | number;
|
||||
} & Record<T, any>;
|
||||
|
||||
export type TChartProps<K extends string, T extends string> = {
|
||||
export type TBaseChartProps<K extends string, T extends string> = {
|
||||
data: TChartData<K, T>[];
|
||||
className?: string;
|
||||
legend?: TChartLegend;
|
||||
margin?: TChartMargin;
|
||||
showTooltip?: boolean;
|
||||
customTooltipContent?: (props: { active?: boolean; label: string; payload: any }) => React.ReactNode;
|
||||
};
|
||||
|
||||
// Props specific to charts with X and Y axes
|
||||
export type TAxisChartProps<K extends string, T extends string> = TBaseChartProps<K, T> & {
|
||||
xAxis: {
|
||||
key: keyof TChartData<K, T>;
|
||||
label?: string;
|
||||
@ -38,15 +47,14 @@ export type TChartProps<K extends string, T extends string> = {
|
||||
offset?: number;
|
||||
dx?: number;
|
||||
};
|
||||
className?: string;
|
||||
legend?: TChartLegend;
|
||||
margin?: TChartMargin;
|
||||
tickCount?: {
|
||||
x?: number;
|
||||
y?: number;
|
||||
};
|
||||
showTooltip?: boolean;
|
||||
customTooltipContent?: (props: { active?: boolean; label: string; payload: any }) => React.ReactNode;
|
||||
customTicks?: {
|
||||
x?: React.ComponentType<unknown>;
|
||||
y?: React.ComponentType<unknown>;
|
||||
};
|
||||
};
|
||||
|
||||
// ============================================================
|
||||
@ -67,7 +75,7 @@ export type TBarItem<T extends string> = {
|
||||
shapeVariant?: TBarChartShapeVariant;
|
||||
};
|
||||
|
||||
export type TBarChartProps<K extends string, T extends string> = TChartProps<K, T> & {
|
||||
export type TBarChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
|
||||
bars: TBarItem<T>[];
|
||||
barSize?: number;
|
||||
};
|
||||
@ -87,7 +95,7 @@ export type TLineItem<T extends string> = {
|
||||
style?: Record<string, string | number>;
|
||||
};
|
||||
|
||||
export type TLineChartProps<K extends string, T extends string> = TChartProps<K, T> & {
|
||||
export type TLineChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
|
||||
lines: TLineItem<T>[];
|
||||
};
|
||||
|
||||
@ -102,7 +110,7 @@ export type TScatterPointItem<T extends string> = {
|
||||
stroke: string;
|
||||
};
|
||||
|
||||
export type TScatterChartProps<K extends string, T extends string> = TChartProps<K, T> & {
|
||||
export type TScatterChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
|
||||
scatterPoints: TScatterPointItem<T>[];
|
||||
};
|
||||
|
||||
@ -123,7 +131,7 @@ export type TAreaItem<T extends string> = {
|
||||
style?: Record<string, string | number>;
|
||||
};
|
||||
|
||||
export type TAreaChartProps<K extends string, T extends string> = TChartProps<K, T> & {
|
||||
export type TAreaChartProps<K extends string, T extends string> = TAxisChartProps<K, T> & {
|
||||
areas: TAreaItem<T>[];
|
||||
comparisonLine?: {
|
||||
dashedLine: boolean;
|
||||
@ -141,7 +149,7 @@ export type TCellItem<T extends string> = {
|
||||
};
|
||||
|
||||
export type TPieChartProps<K extends string, T extends string> = Pick<
|
||||
TChartProps<K, T>,
|
||||
TBaseChartProps<K, T>,
|
||||
"className" | "data" | "showTooltip" | "legend" | "margin"
|
||||
> & {
|
||||
dataKey: T;
|
||||
@ -223,7 +231,7 @@ export type TRadarItem<T extends string> = {
|
||||
};
|
||||
|
||||
export type TRadarChartProps<K extends string, T extends string> = Pick<
|
||||
TChartProps<K, T>,
|
||||
TBaseChartProps<K, T>,
|
||||
"className" | "showTooltip" | "margin" | "data" | "legend"
|
||||
> & {
|
||||
dataKey: T;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user