mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
106fc0e7cc
- Add distinction between `getInstance` and `getInstanceOrCreate` since it is not always possible to create an instance (since you might not know the correct arguments) - Remove all the `export const *Store = *Store.getInstance<*Store>();` calls as it defeats the purpose of `Singleton`. Plus with the typing changes the appropriate `*Store.getInstance()` is "short enough". - Special case the two extension export facades to not need to use `getInstanceOrCreate`. Plus since they are just facades it is always possible to create them. - Move some other types to be also `Singleton`'s: ExtensionLoader, ExtensionDiscovery, ThemeStore, LocalizationStore, ... - Fixed dev-run always using the same port with electron inspect - Update Store documentation with new recommendations about creating instances of singletons - Fix all unit tests to create their dependent singletons Signed-off-by: Sebastian Malton <sebastian@malton.name>
68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
import "./pie-chart.scss";
|
|
import React from "react";
|
|
import { observer } from "mobx-react";
|
|
import ChartJS, { ChartOptions } from "chart.js";
|
|
import { Chart, ChartProps } from "./chart";
|
|
import { cssNames } from "../../utils";
|
|
import { ThemeStore } from "../../theme.store";
|
|
|
|
interface Props extends ChartProps {
|
|
}
|
|
|
|
@observer
|
|
export class PieChart extends React.Component<Props> {
|
|
render() {
|
|
const { data, className, options, ...chartProps } = this.props;
|
|
const { contentColor } = ThemeStore.getInstance().activeTheme.colors;
|
|
const cutouts = [88, 76, 63];
|
|
const opts: ChartOptions = this.props.showChart === false ? {} : {
|
|
maintainAspectRatio: false,
|
|
tooltips: {
|
|
mode: "index",
|
|
callbacks: {
|
|
title: () => "",
|
|
label: (tooltipItem, data) => {
|
|
const dataset: any = data["datasets"][tooltipItem.datasetIndex];
|
|
const metaData = Object.values<{ total: number }>(dataset["_meta"])[0];
|
|
const percent = Math.round((dataset["data"][tooltipItem["index"]] / metaData.total) * 100);
|
|
|
|
if (isNaN(percent)) return "N/A";
|
|
|
|
return `${percent}%`;
|
|
},
|
|
},
|
|
filter: ({ datasetIndex, index }, { datasets }) => {
|
|
const { data } = datasets[datasetIndex];
|
|
|
|
if (datasets.length === 1) return true;
|
|
|
|
return index !== data.length - 1;
|
|
},
|
|
position: "cursor",
|
|
},
|
|
elements: {
|
|
arc: {
|
|
borderWidth: 1,
|
|
borderColor: contentColor
|
|
},
|
|
},
|
|
cutoutPercentage: cutouts[data.datasets.length - 1] || 50,
|
|
responsive: true,
|
|
...options
|
|
};
|
|
|
|
return (
|
|
<Chart
|
|
className={cssNames("PieChart flex column align-center", className)}
|
|
data={data}
|
|
options={opts}
|
|
{...chartProps}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
ChartJS.Tooltip.positioners.cursor = function (elements: any, position: { x: number; y: number }) {
|
|
return position;
|
|
};
|