Toggle the boxes to show or hide items.
Filtering is an important technique for removing clutter.
This example creates a simple JSX legend that filters the chart by removing items from the state.
You can see the example's styling in the CSS tab or modify the CSS in the playground.
See also
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import has from "lodash/has";
import pickBy from "lodash/pickBy";
import { Chart } from "regraph";
import data, { getLegend } from "./data";
const legendComponent = getLegend();
const LegendCheckBox = ({ label, id, color, checked, onChange }) => {
const handleChange = (event) => {
const { target } = event;
if (target) {
onChange(target.id, target.checked);
}
};
return (
<label htmlFor={id} className="legend-checkbox">
{label}
<input type="checkbox" id={id} defaultChecked={checked} onChange={handleChange} />
<span style={{ backgroundColor: color }} />
</label>
);
};
export const Demo = () => <Legend items={data()} legend={legendComponent} />;
function Legend(props) {
const [state, setState] = useState({
filter: {},
positions: {},
});
const { items, legend } = props;
const handleChartChange = ({ positions }) => {
if (!positions) {
return;
}
setState((current) => {
return { ...current, positions: { ...positions } };
});
};
const handleCheckBoxChange = (id, checked) => {
setState((current) => {
return { ...current, filter: { ...current.filter, [id]: !checked } };
});
};
// filter chart items based on the current filter state
const filtered = () => {
return pickBy(
items,
(value) => !has(value, "data.product") || !state.filter[value.data.product]
);
};
const { filter, positions } = state;
return (
<div style={{ width: "100%", height: "100%" }}>
<Chart
animation={{ animate: true, time: 1000 }}
items={ }
layout={{ tightness: 4 }}
options={{ navigation: false, overview: false }}
positions={positions}
onChange={handleChartChange}
/>
<div className="legend">
{legend.map((product) => (
<LegendCheckBox
key={product.id}
label={product.label}
id={product.id}
color={product.color}
checked={ filter[product.id]}
onChange={handleCheckBoxChange}
/>
))}
</div>
</div>
);
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);import sortBy from "lodash/sortBy";
import { style } from "@ci/theme/rg/js/storyStyles";
const labels = {
Chrome: "Google Chrome",
Firefox: "Mozilla Firefox",
Flash: "Adobe Flash",
IE: "Internet Explorer",
Java: "Oracle Java",
PDF: "Adobe PDF",
PHP: "PHP Language",
Silverlight: "Microsoft Silverlight",
Windows: "Microsoft Windows",
};
function getLegend() {
const items = data();
const legend = {};
Object.keys(items).forEach((id) => {
const item = items[id];
if (item.data) {
const { product } = item.data;
if (product && !legend[product]) {
legend[product] = {
id: product,
color: item.color,
label: labels[product] || product,
};
}
}
});
return sortBy(legend, "label");
}
function data() {
return {
Hanjuan: {
label: { text: "Hanjuan", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Angler: {
label: { text: "Angler", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Archie: {
label: { text: "Archie", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Astrum: {
label: { text: "Astrum", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"Bleeding life": {
label: { text: "Bleeding life", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Dotkachef: {
label: { text: "Dotkachef", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
CkVip: {
label: { text: "CkVip", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Fiesta: {
label: { text: "Fiesta", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Flash: {
label: { text: "Flash", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
GongDa: {
label: { text: "GongDa", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Infinity: {
label: { text: "Infinity", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
LightsOut: {
label: { text: "LightsOut", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Magnitude: {
label: { text: "Magnitude", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Neutrino: {
label: { text: "Neutrino", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Niteris: {
label: { text: "Niteris", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Nuclear: {
label: { text: "Nuclear", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"Nuclear 3.x": {
label: { text: "Nuclear 3.x", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
NullHole: {
label: { text: "NullHole", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Rig: {
label: { text: "Rig", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Sednit: {
label: { text: "Sednit", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Styx: {
label: { text: "Styx", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
SweetOrange: {
label: { text: "SweetOrange", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"Nuclear 2.2": {
label: { text: "Nuclear 2.2", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"Nuclear 2.1": {
label: { text: "Nuclear 2.1", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"Nuclear 2.0": {
label: { text: "Nuclear 2.0", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"Redkit 2.x": {
label: { text: "Redkit 2.x", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"Redkit Light": {
label: { text: "Redkit Light", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"Neo Sploit": {
label: { text: "Neo Sploit", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"FlashPack (child of SafePack / CritXPack/ Vintage Pack)": {
label: {
text: "FlashPack (child of SafePack / CritXPack/ Vintage Pack)",
...style.primaryLabel2,
},
data: {
type: "malware",
},
...style.primary2,
},
"Safe Pack": {
label: { text: "Safe Pack", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"White Lotus": {
label: { text: "White Lotus", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Popads: {
label: { text: "Popads", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"Net Boom NB Exploiter": {
label: { text: "Net Boom NB Exploiter", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"Blackhole (last)*": {
label: { text: "Blackhole (last)*", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Crimeboss: {
label: { text: "Crimeboss", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Sakura: {
label: { text: "Sakura", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Glazunov: {
label: { text: "Glazunov", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
Rawin: {
label: { text: "Rawin", ...style.primaryLabel2 },
data: {
type: "malware",
},
...style.primary2,
},
"CVE-2010-0188": {
label: { text: "CVE-2010-0188", ...style.darkLabelBackground },
data: {
product: "PDF",
type: "cve",
},
...style.cat02,
},
"CVE-2010-0188-Astrum": {
id1: "CVE-2010-0188",
id2: "Astrum",
data: {
product: "PDF",
},
...style.link,
},
"CVE-2010-0188-Nuclear": {
id1: "CVE-2010-0188",
id2: "Nuclear",
data: {
product: "PDF",
},
...style.link,
},
"CVE-2010-0188-Nuclear 3.x": {
id1: "CVE-2010-0188",
id2: "Nuclear 3.x",
data: {
product: "PDF",
},
...style.link,
},
"CVE-2010-0188-Nuclear 2.2": {
id1: "CVE-2010-0188",
id2: "Nuclear 2.2",
data: {
product: "PDF",
},
...style.link,
},
"CVE-2010-0188-Nuclear 2.1": {
id1: "CVE-2010-0188",
id2: "Nuclear 2.1",
data: {
product: "PDF",
},
...style.link,
},
"CVE-2010-0188-Nuclear 2.0": {
id1: "CVE-2010-0188",
id2: "Nuclear 2.0",
data: {
product: "PDF",
},
...style.link,
},
"CVE-2010-0188-Blackhole (last)*": {
id1: "CVE-2010-0188",
id2: "Blackhole (last)*",
data: {
product: "PDF",
},
...style.link,
},
"CVE-2011-3402": {
label: { text: "CVE-2011-3402", ...style.darkLabelBackground },
data: {
product: "Windows",
type: "cve",
},
...style.cat06,
},
"CVE-2011-3402-Magnitude": {
id1: "CVE-2011-3402",
id2: "Magnitude",
data: {
product: "Windows",
},
...style.link,
},
"CVE-2011-3402-Nuclear 2.0": {
id1: "CVE-2011-3402",
id2: "Nuclear 2.0",
data: {
product: "Windows",
},
...style.link,
},
"CVE-2011-3402-Blackhole (last)*": {
id1: "CVE-2011-3402",
id2: "Blackhole (last)*",
data: {
product: "Windows",
},
...style.link,
},
"CVE-2011-3544": {
label: { text: "CVE-2011-3544", ...style.darkLabelBackground },
data: {
product: "Java",
type: "cve",
},
...style.cat08,
},
"CVE-2011-3544-Bleeding life": {
id1: "CVE-2011-3544",
id2: "Bleeding life",
data: {
product: "Java",
},
...style.link,
},
"CVE-2011-3544-Nuclear 2.1": {
id1: "CVE-2011-3544",
id2: "Nuclear 2.1",
data: {
product: "Java",
},
...style.link,
},
"CVE-2011-3544-White Lotus": {
id1: "CVE-2011-3544",
id2: "White Lotus",
data: {
product: "Java",
},
...style.link,
},
"CVE-2011-3544-Crimeboss": {
id1: "CVE-2011-3544",
id2: "Crimeboss",
data: {
product: "Java",
},
...style.link,
},
"CVE-2011-3544-Sakura": {
id1: "CVE-2011-3544",
id2: "Sakura",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-0507": {
label: { text: "CVE-2012-0507", ...style.darkLabelBackground },
data: {
product: "Java",
type: "cve",
},
...style.cat08,
},
"CVE-2012-0507-Fiesta": {
id1: "CVE-2012-0507",
id2: "Fiesta",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-0507-GongDa": {
id1: "CVE-2012-0507",
id2: "GongDa",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-0507-Magnitude": {
id1: "CVE-2012-0507",
id2: "Magnitude",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-0507-Nuclear": {
id1: "CVE-2012-0507",
id2: "Nuclear",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-0507-Rig": {
id1: "CVE-2012-0507",
id2: "Rig",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-0507-Blackhole (last)*": {
id1: "CVE-2012-0507",
id2: "Blackhole (last)*",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-0507-Rawin": {
id1: "CVE-2012-0507",
id2: "Rawin",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-1889": {
label: { text: "CVE-2012-1889", ...style.darkLabelBackground },
data: {
product: "Windows",
type: "cve",
},
...style.cat06,
},
"CVE-2012-1889-GongDa": {
id1: "CVE-2012-1889",
id2: "GongDa",
data: {
product: "Windows",
},
...style.link,
},
"CVE-2012-5692": {
label: { text: "CVE-2012-5692", ...style.darkLabelBackground },
data: {
product: "PHP",
type: "cve",
},
...style.cat09,
},
"CVE-2012-5692-Dotkachef": {
id1: "CVE-2012-5692",
id2: "Dotkachef",
data: {
product: "PHP",
},
...style.link,
},
"CVE-2012-1723": {
label: { text: "CVE-2012-1723", ...style.darkLabelBackground },
data: {
product: "Java",
type: "cve",
},
...style.cat08,
},
"CVE-2012-1723-Bleeding life": {
id1: "CVE-2012-1723",
id2: "Bleeding life",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-1723-LightsOut": {
id1: "CVE-2012-1723",
id2: "LightsOut",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-1723-Nuclear": {
id1: "CVE-2012-1723",
id2: "Nuclear",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-1723-Nuclear 3.x": {
id1: "CVE-2012-1723",
id2: "Nuclear 3.x",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-1723-SweetOrange": {
id1: "CVE-2012-1723",
id2: "SweetOrange",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-1723-Nuclear 2.2": {
id1: "CVE-2012-1723",
id2: "Nuclear 2.2",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-1723-Nuclear 2.1": {
id1: "CVE-2012-1723",
id2: "Nuclear 2.1",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-1723-Neo Sploit": {
id1: "CVE-2012-1723",
id2: "Neo Sploit",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-1723-Safe Pack": {
id1: "CVE-2012-1723",
id2: "Safe Pack",
data: {
product: "Java",
},
...style.link,
},
"CVE-2012-1723-Blackhole (last)*": {
id1: "CVE-2012-1723",
id2: "Blackhole (last)*",
data: {
product: "Java",
},
...style.link,
},
"CVE-2013-0025": {
label: { text: "CVE-2013-0025", ...style.darkLabelBackground },
data: {
product: "IE",
type: "cve",
},
...style.cat04,
},
"CVE-2013-0025-Rig": {
id1: "CVE-2013-0025",
id2: "Rig",
data: {
product: "IE",
},
...style.link,
},
"CVE-2013-0074": {
label: { text: "CVE-2013-0074", ...style.darkLabelBackground },
data: {
product: "Silverlight",
type: "cve",
},
...style.cat05,
},
"CVE-2013-0074-Hanjuan": {
id1: "CVE-2013-0074",
id2: "Hanjuan",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-0074-Angler": {
id1: "CVE-2013-0074",
id2: "Angler",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-0074-Archie": {
id1: "CVE-2013-0074",
id2: "Archie",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-0074-Astrum": {
id1: "CVE-2013-0074",
id2: "Astrum",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-0074-Fiesta": {
id1: "CVE-2013-0074",
id2: "Fiesta",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-0074-Infinity": {
id1: "CVE-2013-0074",
id2: "Infinity",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-0074-Neutrino": {
id1: "CVE-2013-0074",
id2: "Neutrino",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-0074-Nuclear": {
id1: "CVE-2013-0074",
id2: "Nuclear",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-0074-Rig": {
id1: "CVE-2013-0074",
id2: "Rig",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-0074-FlashPack (child of SafePack / CritXPack/ Vintage Pack)": {
id1: "CVE-2013-0074",
id2: "FlashPack (child of SafePack / CritXPack/ Vintage Pack)",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-3896": {
label: { text: "CVE-2013-3896", ...style.darkLabelBackground },
data: {
product: "Silverlight",
type: "cve",
},
...style.cat05,
},
"CVE-2013-3896-Angler": {
id1: "CVE-2013-3896",
id2: "Angler",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-3896-Astrum": {
id1: "CVE-2013-3896",
id2: "Astrum",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-3896-Fiesta": {
id1: "CVE-2013-3896",
id2: "Fiesta",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2013-3896-FlashPack (child of SafePack / CritXPack/ Vintage Pack)": {
id1: "CVE-2013-3896",
id2: "FlashPack (child of SafePack / CritXPack/ Vintage Pack)",
data: {
product: "Silverlight",
},
...style.link,
},
"CVE-2012-3993": {
label: { text: "CVE-2012-3993", ...style.darkLabelBackground },
data: {
product: "Firefox",
type: "cve",
},
...style.cat07,
},
"CVE-2012-3993-Niteris": {
id1: "CVE-2012-3993",
id2: "Niteris",
data: {
product: "Firefox",
},
...style.link,
},
"CVE-2013-0422": {
label: { text: "CVE-2013-0422", ...style.darkLabelBackground },
data: {
product: "Java",
type: "cve",
},
...style.cat08,
},
"CVE-2013-0422-GongDa": {
id1: "CVE-2013-0422",
id2: "GongDa",
data: {
product: "Java",
},
...style.link,
},
"CVE-2013-0422-Niteris": {
id1: "CVE-2013-0422",
id2: "Niteris",
data: {
product: "Java",
},
...style.link,
},
"CVE-2013-0422-Nuclear 3.x": {
id1: "CVE-2013-0422",
id2: "Nuclear 3.x",
data: {
product: "Java",
},
...style.link,
},
"CVE-2013-0422-Nuclear 2.2": {
id1: "CVE-2013-0422",
id2: "Nuclear 2.2",
data: {
product: "Java",
},
...style.link,
},
"CVE-2013-0422-Blackhole (last)*": {
id1: "CVE-2013-0422",
id2: "Blackhole (last)*",
data: {
product: "Java",
},
...style.link,
},
"CVE-2013-0422-Crimeboss": {
id1: "CVE-2013-0422",
id2: "Crimeboss",
data: {
product: "Java",
},
...style.link,
},
"CVE-2013-0422-Sakura": {
id1: "CVE-2013-0422",
id2: "Sakura",
data: {
product: "Java",
},
...style.link,
},
"CVE-2013-0634": {
label: { text: "CVE-2013-0634", ...style.darkLabelBackground },
data: {
product: "Flash",
type: "cve",
},
...style.cat01,
},
"CVE-2013-0634-Astrum": {
id1: "CVE-2013-0634",
id2: "Astrum",
data: {
product: "Flash",
},
...style.link,
},
"CVE-2013-0634-Bleeding life": {
id1: "CVE-2013-0634",
id2: "Bleeding life",
data: {
product: "Flash",
},
...style.link,
},
"CVE-2013-0634-GongDa": {
id1: "CVE-2013-0634",
id2: "GongDa",
data: {
product: "Flash",
},
...style.link,
},
"CVE-2013-0634-Magnitude": {
id1: "CVE-2013-0634",
id2: "Magnitude",
data: {
product: "Flash",
},
...style.link,
},
"CVE-2013-0634-Niteris": {
id1: "CVE-2013-0634",
id2: "Niteris",
data: {
product: "Flash",
},
...style.link,
},
"CVE-2013-0634-Rig": {
id1: "CVE-2013-0634",
id2: "Rig",
data: {
product: "Flash",
},
...style.link,
},
"CVE-2013-1347": {
label: { text: "CVE-2013-1347", ...style.darkLabelBackground },
data: {
product: "IE",
type: "cve",
},
...style.cat04,
},
"CVE-2013-1347-Infinity": {
id1: "CVE-2013-1347",
id2: "Infinity",
data: {
product: "IE",
},
...style.link,
},
"CVE-2013-1347-LightsOut": {
id1: "CVE-2013-1347",
id2: "LightsOut",
data: {
product: "IE",
},
...style.link,
},
"CVE-2013-1347-Sednit": {
id1: "CVE-2013-1347",
id2: "Sednit",
data: {
product: "IE",
},
...style.link,
},
"CVE-2013-1493": {
label: { text: "CVE-2013-1493", ...style.darkLabelBackground },
data: {
product: "Java",
type: "cve",
},
...style.cat08,
},
"CVE-2013-1493-Dotkachef": {
id1: "CVE-2013-1493",
id2: "Dotkachef",
data: {
product: "Java",
},
...style.link,
},
"CVE-2013-1493-Redkit 2.x": {
id1: "CVE-2013-1493",
id2: "Redkit 2.x",
data: {
product: "Java",
},
...style.link,
},
"CVE-2013-1493-Rawin": {
id1: "CVE-2013-1493",
id2: "Rawin",
data: {
product: "Java",
},
...style.link,
},
"CVE-2013-1710": {
label: { text: "CVE-2013-1710", ...style.darkLabelBackground },
data: {
product: "Firefox",
type: "cve",
},
...style.cat07,
},
"CVE-2013-1710-Niteris": {
id1: "CVE-2013-1710",
id2: "Niteris",
data: {
product: "Firefox",
},
...style.link,
},
"CVE-2013-2423": {
label: { text: "CVE-2013-2423", ...style.darkLabelBackground },
data: {
product: "Java",
type: "cve",
},
...style.cat08,
// ...truncated 1431 lines<!doctype html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>@import "@ci/theme/rg/css/variables.css";
.legend {
font-family: sans-serif;
position: absolute;
bottom: 16px;
right: 16px;
background-color: rgba(255, 255, 255, 0.7);
border: solid 1px lightgray;
padding: 12px 12px 6px;
}
.legend-checkbox,
.legend-radio {
display: block;
position: relative;
padding-left: 35px;
padding-right: 12px;
margin-bottom: 4px;
line-height: 25px;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.legend-checkbox:hover,
.legend-radio:hover {
background-color: #eee;
}
.legend-checkbox > input,
.legend-radio > input {
position: absolute;
opacity: 0;
height: 0;
width: 0;
}
.legend-checkbox > span,
.legend-radio > span {
position: absolute;
top: 0;
left: 0;
}
.legend-checkbox > span {
height: 25px;
width: 25px;
background-color: var(--primary1);
}
.legend-radio > span {
border-color: var(--primary2);
border-width: 2px;
border-style: solid;
border-radius: 50%;
background-color: white;
height: 20px;
width: 20px;
}
.legend-checkbox > span:after,
.legend-radio > span:after {
content: "";
position: absolute;
display: none;
}
.legend-checkbox > span:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border-color: white;
border-style: solid;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.legend-radio > span:after {
left: 4px;
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
}
.legend-radio:hover > span:after {
display: block;
background-color: #eee;
}
.legend-checkbox > input:checked ~ span:after,
.legend-radio > input:checked ~ span::after {
display: block;
}
.legend-radio > input:checked ~ span::after {
background-color: var(--primary1);
}