import React, { useMemo } from "react";
import { useTranslation } from "react-i18next";
import { useNeighborhoodDemographics } from "~/sdks/NeighborhoodDemographics/context";
import { Chart } from "~/components/deprecated";
export const IncomeBrackets = () => {
    const { t } = useTranslation("neighborhoodDemographics");
    const { demographicsData: { income_level: incomeLevel }, } = useNeighborhoodDemographics();
    const dataset = useMemo(() => {
        const variables = incomeLevel === null || incomeLevel === void 0 ? void 0 : incomeLevel.variables.filter((variable) => !variable.type || variable.type === "percent").sort((a, b) => Number(a.variable.split("_")[1]) - Number(b.variable.split("_")[1]));
        return {
            labels: (variables === null || variables === void 0 ? void 0 : variables.map((variable) => variable.label)) || [],
            data: (variables === null || variables === void 0 ? void 0 : variables.map((variable) => Number((variable.value * 100).toFixed(1)))) || [],
        };
    }, [incomeLevel === null || incomeLevel === void 0 ? void 0 : incomeLevel.variables]);
    const chartOptions = useMemo(() => ({
        title: t("data.income.graphs.incomeBrackets.title"),
        labels: dataset.labels,
        data: dataset.data,
        unit: "%",
    }), [dataset]);
    return (React.createElement(Chart.Root, Object.assign({}, chartOptions),
        React.createElement(Chart.BarChart, null)));
};
//# sourceMappingURL=index.js.map