1"use strict";(self.webpackChunkhelio_docs=self.webpackChunkhelio_docs||[]).push([["4145"],{30735(e,t,r){r.r(t),r.d(t,{metadata:()=>s,default:()=>m,frontMatter:()=>c,contentTitle:()=>p,toc:()=>f,assets:()=>h});var s=JSON.parse('{"id":"reference/design-system/element-types/data-visualization/pie-chart","title":"Pie Chart","description":"A pie chart is a good tool to show how different values relate to each","source":"@site/docs/reference/design-system/element-types/data-visualization/pie-chart.mdx","sourceDirName":"reference/design-system/element-types/data-visualization","slug":"/reference/design-system/element-types/data-visualization/pie-chart","permalink":"/docs/reference/design-system/element-types/data-visualization/pie-chart","draft":false,"unlisted":false,"tags":[],"version":"current","frontMatter":{"sidebar_custom_props":{"icon":"PieChartComponent"}},"sidebar":"referenceSidebar","previous":{"title":"Gauge","permalink":"/docs/reference/design-system/element-types/data-visualization/gauge"},"next":{"title":"Radial Bars","permalink":"/docs/reference/design-system/element-types/data-visualization/radial-bars"}}'),a=r(11684),i=r(10506),n=r(46351);let o=r.p+"assets/images/pie-chart-percentage-86238cb3fca3d46860f9d6e18b089d58.png",l=r.p+"assets/images/pie-chart-total-564f338e5e8c421a82dc3936da3bfda3.png",d=r.p+"assets/images/pie-chart-e6fd24273b631d339d2f9ccd35ab7f47.png",c={sidebar_custom_props:{icon:"PieChartComponent"}},p="Pie Chart",h={},f=[{value:"Properties",id:"properties",level:2},{value:"Related",id:"related",level:2}];function y(e){let t={h1:"h1",h2:"h2",header:"header",hr:"hr",p:"p",...(0,i.R)(),...e.components};return n.Zf||u("PropertyGroup",!1),n.Zf.Elements||u("PropertyGroup.Elements",!1),n.Zf.Elements.Container||u("PropertyGroup.Elements.Container",!0),n.Zf.Elements.DisplayCondition||u("PropertyGroup.Elements.DisplayCondition",!0),n.Zf.Property||u("PropertyGroup.Property",!0),(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)(t.header,{children:(0,a.jsx)(t.h1,{id:"pie-chart",children:"Pie Chart"})}),"\n",(0,a.jsxs)(n.e,{type:"2-3",children:[(0,a.jsx)(n.Hy,{src:d,border:"frame"}),(0,a.jsx)(n.hI,{children:(0,a.jsx)(t.p,{children:"A pie chart is a good tool to show how different values relate to each\nother. Each category is a slice of the pie, so you can see how big each\ncategory is compared to the others. This way, operators can quickly grasp\nthe content of a dataset."})})]}),"\n",(0,a.jsx)(t.hr,{}),"\n",(0,a.jsx)(t.h2,{id:"properties",children:"Properties"}),"\n",(0,a.jsxs)(n.Zf,{name:"Slices",children:[(0,a.jsx)(t.p,{children:"The following properties are featured by each slice:"}),(0,a.jsx)(n.Zf.Property,{name:"Label",type:"dynamic-property",children:(0,a.jsx)(t.p,{children:"Provides context and information to operators, guiding them and helping them\nunderstand the meaning of the value of this particular element."})}),(0,a.jsx)(n.Zf.Property,{name:"Value",type:"dynamic-property",children:(0,a.jsxs)(t.p,{children:["The current value that should be displayed on the Slice, usually this will\nbe bound to a ",(0,a.jsx)(n.vr,{code:"variable-types"}),"."]})}),(0,a.jsx)(n.Zf.Property,{name:"Color",type:"dynamic-property",children:(0,a.jsx)(t.p,{children:"Choose a unique color for each slice of the Pie Chart. This will help users\ndistinguish between different values."})})]}),"\n",(0,a.jsx)(n.Zf.Elements.Container,{type:"expanded"}),"\n",(0,a.jsxs)(n.Zf,{name:"Chart Legend",children:[(0,a.jsx)(n.Zf.Property,{name:"Absolute Values",children:(0,a.jsxs)(n.e,{type:"2-1",children:[(0,a.jsx)("div",{children:(0,a.jsx)(t.p,{children:"Display the actual values of each SecurityPolicyViolationEvent"})}),(0,a.jsx)(n.Hy,{src:d,border:"frame"})]})}),(0,a.jsx)(n.Zf.Property,{name:"Percentage Values",children:(0,a.jsxs)(n.e,{type:"2-1",children:[(0,a.jsx)("div",{children:(0,a.jsx)(t.p,{children:"Display values as percentages"})}),(0,a.jsx)(n.Hy,{src:o,border:"frame"})]})})]}),"\n",(0,a.jsx)(n.Zf.Property,{name:"Display Total",children:(0,a.jsxs)(n.e,{type:"2-1",children:[(0,a.jsx)("div",{children:(0,a.jsx)(t.p,{children:"Display total of all the slices at the bottom of the legend"})}),(0,a.jsx)(n.Hy,{src:l,border:"frame"})]})}),"\n",(0,a.jsx)(t.hr,{}),"\n",(0,a.jsx)(n.Zf.Elements.DisplayCondition,{}),"\n",(0,a.jsx)(t.hr,{}),"\n",(0,a.jsx)(t.h2,{id:"related",children:"Related"}),"\n",(0,a.jsx)(n.S8,{items:["element:trend"]})]})}function m(e={}){let{wrapper:t}={...(0,i.R)(),...e.components};return t?(0,a.jsx)(t,{...e,children:(0,a.jsx)(y,{...e})}):y(e)}function u(e,t){throw Error("Expected "+(t?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}}}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.