PieChart.yaml.txt

ComponentDefinitions:
  cmpPieChart:
    DefinitionType: CanvasComponent
    CustomProperties:
      AccessibleLabel:
        PropertyKind: Input
        DisplayName: Accessible Label
        Description: Screen reader label for the chart
        RaiseOnReset: true
        DataType: Text
        Default: ="Pie chart"
      Caption:
        PropertyKind: Input
        DisplayName: Caption
        Description: Optional text displayed below the chart; leave blank to hide
        RaiseOnReset: true
        DataType: Text
        Default: ="Description of what Pie Chart represents"
      CaptionColor:
        PropertyKind: Input
        DisplayName: Caption Color
        Description: CSS color for the caption text
        RaiseOnReset: true
        DataType: Text
        Default: ="black"
      CenterLabelColor:
        PropertyKind: Input
        DisplayName: Center Label Color
        Description: color (CSS) of center label
        RaiseOnReset: true
        DataType: Text
        Default: ="black"
      CenterLabelText:
        PropertyKind: Input
        DisplayName: Center Label Text
        Description: Overrides the center label; blank shows total value
        RaiseOnReset: true
        DataType: Text
        Default: ="Center Label"
      ChartBorderColor:
        PropertyKind: Input
        DisplayName: Chart Border Color
        Description: Border color used when Chart Shadow is DropShadow.None
        RaiseOnReset: true
        DataType: Text
        Default: ="#E0E0E0"
      ChartDimension:
        PropertyKind: Output
        DisplayName: Chart Dimension
        Description: width and height of Pie
        DataType: Number
      ChartFill:
        PropertyKind: Input
        DisplayName: Chart Fill
        Description: Background fill color used for the chart container and donut hole
        RaiseOnReset: true
        DataType: Text
        Default: ="#FAFAFA"
      ChartShadow:
        PropertyKind: Input
        DisplayName: Chart Shadow
        Description: Drop shadow style for the chart container (DropShadow enum)
        RaiseOnReset: true
        DataType: Text
        Default: =DropShadow.Semibold
      ChartTitle:
        PropertyKind: Input
        DisplayName: Chart Title
        Description: Text displayed as the chart heading
        RaiseOnReset: true
        DataType: Text
        Default: ="Pie Chart Title"
      ChartX:
        PropertyKind: Output
        DisplayName: Chart X
        Description: upper left corner X of pie (excluding title and caption)
        DataType: Number
      ChartY:
        PropertyKind: Output
        DisplayName: Chart Y
        Description: upper left corner Y of pie (excluding title and caption)
        DataType: Number
      DonutHolePercent:
        PropertyKind: Input
        DisplayName: Donut Hole Percent
        Description: 0-100 inner radius percentage for donut chart mode; 0 disables donut hole
        RaiseOnReset: true
        DataType: Number
        Default: =If(IsBlank(Self.Caption), 0, 39)
      EmptyStateText:
        PropertyKind: Input
        DisplayName: Empty State Text
        Description: Message shown when Items is empty or total is zero
        RaiseOnReset: true
        DataType: Text
        Default: ="No data"
      EndRotation:
        PropertyKind: Input
        DisplayName: End Rotation
        Description: Degrees at which the last slice ends; 360 = full circle, use 180 for gauge
        RaiseOnReset: true
        DataType: Number
        Default: =360
      ExplodeDistance:
        PropertyKind: Input
        DisplayName: Explode Distance
        Description: How far exploded slices are pulled from center in viewBox units (0-100 space)
        RaiseOnReset: true
        DataType: Number
        Default: =5
      HasSelection:
        PropertyKind: Output
        DisplayName: Has Selection
        Description: True when a slice is currently selected
        DataType: Boolean
      IsItemsEmpty:
        PropertyKind: Output
        DisplayName: Is Items Empty
        Description: True when Items is empty or total value is zero
        DataType: Boolean
      IsPrinting:
        PropertyKind: Input
        DisplayName: Is Printing
        Description: Set to Screen.Printing to hide non-printable portions
        RaiseOnReset: true
        DataType: Boolean
        Default: =false
      Items:
        PropertyKind: Input
        DisplayName: Items
        Description: >-
          Data table for slices.

          Required fields: Key (Text) and Value (Number).

          Alternate field names supported: X for Key, Y for Value.

          Optional fields: Order (Number), Label (Text), Color (Text, CSS hex), Explode (Boolean).

          Define Items using a superset schema (include both X/Y and Key/Value fields) so formulas using Coalesce or conditional field selection can safely reference either schema without non-existent field errors. Missing optional values are defaulted during reset.
        RaiseOnReset: true
        DataType: Table
        Default: |-
          =Table(
            { Order: 1, X: "A", Y: 15, Key: "A", Value: 15, Label: "Alpha", Color: "", Explode: false },
            { Order: 2, X: "B", Y: 25, Key: "B", Value: 25, Label: "Beta",  Color: "", Explode: true  },
            { Order: 3, X: "C", Y: 60, Key: "C", Value: 60, Label: "Gamma", Color: "", Explode: false }
          )
      LegendData:
        PropertyKind: Output
        DisplayName: Legend Data
        Description: >-
          Table of legend records for use by an external legend component.

          Fields: Order (Number), Key (Text), Color (Color), Value (Number), Percent (Number), IsSelected (Boolean).
        DataType: Table
      LegendSortMode:
        PropertyKind: Input
        DisplayName: Legend Sort Mode
        Description: >-
          Controls legend output order.

          Allowed values: MatchChart, Alphabetical, ByValue
        RaiseOnReset: true
        DataType: Text
        Default: ="MatchChart"
      MinLabelAngle:
        PropertyKind: Input
        DisplayName: Min Label Angle
        Description: Minimum slice angle in degrees required before a wedge label is rendered
        RaiseOnReset: true
        DataType: Number
        Default: =10
      OnSliceSelect:
        PropertyKind: Event
        DisplayName: On Slice Select
        Description: Fires when a slice is selected via the button grid
        ReturnType: None
        Default: =
      PaddingBottom:
        PropertyKind: Input
        DisplayName: Padding Bottom
        Description: Space between bottom component edge and content
        RaiseOnReset: true
        DataType: Number
        Default: =6
      PaddingLeft:
        PropertyKind: Input
        DisplayName: Padding Left
        Description: Space between left component edge and content
        RaiseOnReset: true
        DataType: Number
        Default: =6
      PaddingRight:
        PropertyKind: Input
        DisplayName: Padding Right
        Description: Space between right component edge and content
        RaiseOnReset: true
        DataType: Number
        Default: =6
      PaddingTop:
        PropertyKind: Input
        DisplayName: Padding Top
        Description: Space between top component edge and content
        RaiseOnReset: true
        DataType: Number
        Default: =6
      Palette:
        PropertyKind: Input
        DisplayName: Palette
        Description: Table of color strings cycled when a slice has no Color value
        RaiseOnReset: true
        DataType: Table
        Default: |-
          =Table(
            { Value: "#2563EB" },
            { Value: "#10B981" },
            { Value: "#F59E0B" },
            { Value: "#EF4444" },
            { Value: "#8B5CF6" },
            { Value: "#EC4899" }
          )
      PercentFormat:
        PropertyKind: Input
        DisplayName: Percent Format
        Description: Power Fx numeric format string used when rendering percentages in wedge labels, tooltips, and legend values
        RaiseOnReset: true
        DataType: Text
        Default: ="[$-en-US]0.0"
      SelectedKey:
        PropertyKind: Input
        DisplayName: Selected Key
        Description: The Key value of the currently selected slice (in)
        RaiseOnReset: true
        DataType: Text
        Default: =""
      SelectedSlice:
        PropertyKind: Output
        DisplayName: Selected Slice
        Description: Full record of the currently selected slice from Items
        DataType: Record
      ShowCenterLabel:
        PropertyKind: Input
        DisplayName: Show Center Label
        Description: Controls whether the center value label is visible
        RaiseOnReset: true
        DataType: Boolean
        Default: =true
      ShowWedgeLabel:
        PropertyKind: Input
        DisplayName: Show Wedge Label
        Description: Display labels inside wedges when they are large enough
        RaiseOnReset: true
        DataType: Boolean
        Default: =true
      SliceCount:
        PropertyKind: Output
        DisplayName: Slice Count
        Description: Number of slices in Items
        DataType: Number
      SortByValue:
        PropertyKind: Input
        DisplayName: Sort By Value
        Description: When true, default ordering follows Value (descending); otherwise source sequence is used
        RaiseOnReset: true
        DataType: Boolean
        Default: =false
      StartRotation:
        PropertyKind: Input
        DisplayName: Start Rotation
        Description: Clockwise degrees from 12 o'clock where the first slice begins. 0 = top (12 o'clock), 90 = right (3 o'clock).
        RaiseOnReset: true
        DataType: Number
        Default: =15
      StrokeColor:
        PropertyKind: Input
        DisplayName: Stroke Color
        Description: CSS color string for the border between slices
        RaiseOnReset: true
        DataType: Text
        Default: ="white"
      StrokeWidth:
        PropertyKind: Input
        DisplayName: Stroke Width
        Description: Width of the border between slices in viewBox units
        RaiseOnReset: true
        DataType: Number
        Default: =1
      SvgMarkup:
        PropertyKind: Output
        DisplayName: SVG Markup
        Description: The raw SVG string used to render the chart
        DataType: Text
      TotalValue:
        PropertyKind: Output
        DisplayName: Total Value
        Description: Sum of all slice Values in Items
        DataType: Number
      WedgeLabelColor:
        PropertyKind: Input
        DisplayName: Wedge Label Color
        Description: color (CSS) of wedge labels
        RaiseOnReset: true
        DataType: Text
        Default: ="black" //"white"
      WedgeLabelsOutside:
        PropertyKind: Input
        DisplayName: Wedge Labels Outside
        Description: should labels be inside (false) or outside pie (true)
        RaiseOnReset: true
        DataType: Boolean
        Default: =true
    Properties:
      ChartDimension: =cmpPieChart_imgChart.Width
      ChartX: =cmpPieChart_imgChart.X
      ChartY: =cmpPieChart_imgChart.Y
      HasSelection: =varHoveredKey <> ""
      Height: =400
      IsItemsEmpty: |-
        =IsEmpty(varItemsSorted) Or
        Sum(varItemsSorted, Coalesce(Value, 0)) = 0
      LegendData: |-
        =With(
          {
            _legendBase:
              AddColumns(
                varSlices,
                Percent,
                  If(
                    WedgeTotal > 0,
                    Value / WedgeTotal,
                    0
                  ),
                PercentText,
                  Text(
                    If(
                      WedgeTotal > 0,
                      Value / WedgeTotal,
                      0
                    ),
                    Coalesce(Self.PercentFormat, "[$-en-US]0.0%")
                  ),
                ValueText,
                  Text(Value) & " (" &
                  Text(
                    If(
                      WedgeTotal > 0,
                      Value / WedgeTotal,
                      0
                    ),
                    Coalesce(Self.PercentFormat, "[$-en-US]0.0%")
                  ) & ")",
                IsSelected,
                  Key = varHoveredKey
              )
          },
          Switch(
            Coalesce(Self.LegendSortMode, "MatchChart"),
            "Alphabetical",
              SortByColumns(_legendBase, "Key", SortOrder.Ascending, "Order", SortOrder.Ascending),
            "ByValue",
              SortByColumns(_legendBase, "Value", SortOrder.Descending, "Order", SortOrder.Ascending),
            SortByColumns(_legendBase, "Order", SortOrder.Ascending)
          )
        )
      OnReset: |-
        =// only show reset button for dev work
        Set(debugResetVisible, true);

        // ====
        // SECTION 0: SELECTION STATE
        // ====
        If(
          Coalesce(Self.SelectedKey, "") <> "",
          Set(varHoveredKey, Self.SelectedKey),
          Set(varHoveredKey, Coalesce(varHoveredKey, ""))
        );

        // ====
        // SECTION 1: PADDING AND TEXT HEIGHTS
        // ====
        Set(varPadT, Coalesce(Self.PaddingTop, 6));
        Set(varPadB, Coalesce(Self.PaddingBottom, 6));
        Set(varPadL, Coalesce(Self.PaddingLeft, 6));
        Set(varPadR, Coalesce(Self.PaddingRight, 6));
        Set(varTitleH,   If(IsBlank(Self.ChartTitle), 0, 24));
        Set(varCaptionH, If(IsBlank(Self.Caption), 0, 30));

        // ====
        // SECTION 2: CHART GEOMETRY
        // ====
        With(
          {
            _usableW: Self.Width  - varPadL - varPadR,
            _usableH: Self.Height - varPadT - varPadB - varTitleH - varCaptionH
          },
          Set(ChartSize,    Min(_usableW, _usableH));
          Set(ChartCenterX, varPadL + ChartSize / 2);
          Set(ChartCenterY, varPadT + varTitleH + ChartSize / 2)
        );

        Set(PieRadius, ChartSize / 2);

        // ====
        // SECTION 3: GRID PARAMETERS FOR BUTTON HIT LAYER
        // ====
        Set(gridN,      Min(15, Max(10, RoundDown(ChartSize / 20, 0))));
        Set(gridM,      gridN);
        Set(sampleSize, 7);
        Set(threshold,  0.4);

        // ====
        // SECTION 4: INPUT NORMALIZATION (Key/Value) + WEDGE MATH SCALARS
        // ====
        Set(
          varItemsNormalized,
          ForAll(
            Sequence(CountRows(Self.Items)) As row,
            With(
              { _item: Index(Self.Items, row.Value) },
              {
                RowNumber: row.Value,
                Order:   Coalesce(_item.Order, row.Value),
                Key:     Coalesce(Text(_item.Key), Text(_item.X), Text(row.Value)),
                Value:   Coalesce(_item.Value, Coalesce(_item.Y, 0)),
                Label:   Coalesce(Text(_item.Label), Text(_item.Key), Text(_item.X), ""),
                Color:   Coalesce(_item.Color, ""),
                Explode: Coalesce(_item.Explode, false)
              }
            )
          )
        );

        Set(
          varItemsSorted,
          If(
            Coalesce(Self.SortByValue, false),
            SortByColumns(varItemsNormalized, "Value", SortOrder.Descending, "Order", SortOrder.Ascending),
            SortByColumns(varItemsNormalized, "Order", SortOrder.Ascending)
          )
        );

        Set(WedgeTotal, Sum(varItemsSorted, Coalesce(Value, 0)));
        If(WedgeTotal = 0, Set(WedgeTotal, 1));
        Set(WedgeStartRad, Coalesce(Self.StartRotation, 0) * Pi() / 180);
        Set(ArcScale,      Coalesce(Self.EndRotation, 360) / 360);

        // ====
        // SECTION 5: SVG RADII + OUTSIDE LABEL MODE + DONUT SETTINGS
        // ====
        Set(varIsOutside, Coalesce(Self.WedgeLabelsOutside, false));

        Set(varSvgR,
          If(varIsOutside,
            Max(10, 30 - Coalesce(Self.ExplodeDistance, 5)),
            Max(10, 48 - Coalesce(Self.ExplodeDistance, 5))
          )
        );

        Set(varSvgRTxt,
          If(varIsOutside,
            Max(10, 18 - Coalesce(Self.ExplodeDistance, 5)),
            Max(10, 30 - Coalesce(Self.ExplodeDistance, 5))
          )
        );

        Set(varLabelR,
          If(varIsOutside, varSvgR + 2, varSvgR * 0.65)
        );

        Set(varLabelFS, If(varIsOutside, "4", "5"));

        Set(varDonutPct, Max(0, Min(100, Coalesce(Self.DonutHolePercent, 0))));
        Set(varHoleR, varSvgR * varDonutPct / 100);
        Set(varHoleStartAngle, WedgeStartRad);
        Set(varHoleEndAngle,   WedgeStartRad + 2 * Pi() * ArcScale);

        // ====
        // SECTION 6: BUILD varSlices
        // ====
        Set(palCount, CountRows(Self.Palette));

        Set(
          varSlices,
          ForAll(
            varItemsSorted As SortedRec,
            With(
              {
                _cumSum:
                  Coalesce(
                    Sum(
                      Filter(varItemsSorted As SliceRecord, SliceRecord.Order < SortedRec.Order),
                      Coalesce(ThisRecord.Value, 0)
                    ),
                    0
                  )
              },
              With(
                {
                  _value:       SortedRec.Value,
                  _valText:     Text(SortedRec.Value),
                  _explode:     SortedRec.Explode,
                  _explodeDist: Coalesce(Self.ExplodeDistance, 5),
                  _startAngle:  WedgeStartRad
                                + (_cumSum / If(WedgeTotal = 0, 1, WedgeTotal))
                                * 2 * Pi() * ArcScale,
                  _color:
                    Coalesce(
                      If(SortedRec.Color <> "", SortedRec.Color, Blank()),
                      Index(
                        Self.Palette,
                        Mod(SortedRec.Order - 1, If(palCount = 0, 1, palCount)) + 1
                      ).Value,
                      "#D1D5DB"
                    )
                },
                With(
                  {
                    _sliceArc: (_value / If(WedgeTotal = 0, 1, WedgeTotal))
                               * 2 * Pi() * ArcScale,
                    _endAngle: WedgeStartRad
                               + (_cumSum / If(WedgeTotal = 0, 1, WedgeTotal))
                               * 2 * Pi() * ArcScale
                               + (_value / If(WedgeTotal = 0, 1, WedgeTotal))
                               * 2 * Pi() * ArcScale
                  },
                  With(
                    {
                      _midAngle: WedgeStartRad
                                 + (_cumSum / If(WedgeTotal = 0, 1, WedgeTotal))
                                 * 2 * Pi() * ArcScale
                                 + (_value / If(WedgeTotal = 0, 1, WedgeTotal))
                                 * Pi() * ArcScale
                    },
                    With(
                      {
                        _offsetX: If(_explode,  _explodeDist * Sin(_midAngle), 0),
                        _offsetY: If(_explode, -(_explodeDist * Cos(_midAngle)), 0)
                      },
                      With(
                        {
                          _tooltip:
                            _valText & " (" &
                            Text(
                              If(WedgeTotal > 0, _value / WedgeTotal * 100, 0),
                              Coalesce(Self.PercentFormat, "[$-en-US]0.0")
                            ) & "%)"
                        },
                        With(
                          {
                            _label: Coalesce(SortedRec.Label, SortedRec.Key & " " & _tooltip),
                            _lxn:   50 + varLabelR * Sin(_midAngle) + _offsetX,
                            _lyn:   50 - varLabelR * Cos(_midAngle) + _offsetY
                          },
                          {
                            Order:      SortedRec.Order,
                            Key:        SortedRec.Key,
                            Label:      Substitute(Substitute(Substitute(_label, "&", "&amp;"), "<​", "&lt;"), ">", "&gt;"),
                            Value:      _value,
                            RGBColor:   _color,
                            Explode:    _explode,
                            Color:      ColorValue(_color),
                            StartAngle: _startAngle,
                            EndAngle:   _endAngle,
                            MidAngle:   _midAngle,
                            NormStart:  Mod(_startAngle, 2 * Pi()),
                            NormEnd:    Mod(_endAngle,   2 * Pi()),
                            OffsetX:    _offsetX,
                            OffsetY:    _offsetY,
                            X1:      Text(50 + varSvgR * Sin(_startAngle), "[$-en-US]0.0000"),
                            Y1:      Text(50 - varSvgR * Cos(_startAngle), "[$-en-US]0.0000"),
                            X2:      Text(50 + varSvgR * Sin(_endAngle),   "[$-en-US]0.0000"),
                            Y2:      Text(50 - varSvgR * Cos(_endAngle),   "[$-en-US]0.0000"),
                            MidX:    Text(50 + varSvgRTxt * Sin(_midAngle) + _offsetX, "[$-en-US]0.0000"),
                            MidY:    Text(50 - varSvgRTxt * Cos(_midAngle) + _offsetY, "[$-en-US]0.0000"),
                            LabelX:  Text(_lxn, "[$-en-US]0.0000"),
                            LabelY:  Text(_lyn, "[$-en-US]0.0000"),
                            LabelXN: _lxn,
                            LabelYN: _lyn,
                            tooltip: SortedRec.Key & ": " & _tooltip
                          }
                        )
                      )
                    )
                  )
                )
              )
            )
          )
        );

        // ====
        // SECTION 6B: OUTSIDE LABEL PLACEMENT -- EDGE AVOIDANCE + COLLISION AVOIDANCE
        // ====
        // Only active when WedgeLabelsOutside = true; inside mode passes through unchanged.
        //
        // STEP 1 -- EDGE AVOIDANCE:
        //   Estimate text width as Len(Label) * varCharW viewBox units.
        //   varCharW = 2.3: approximate character width at font-size 4.
        //   varMaxX = 97: right safe boundary. varMinX = 3: left safe boundary.
        //
        //   Right side (text-anchor=start): if anchorX + textW > varMaxX,
        //     shift anchor left by HALF the overflow distance only.
        //     Never pull past x=52.
        //
        //   Left side (text-anchor=end): if anchorX - textW < varMinX,
        //     push anchor right by HALF the underflow distance only.
        //     Never push past x=48.
        //
        //   Y is NOT recomputed -- natural LabelYN preserved for rank-push.
        //
        // STEP 2 -- COLLISION AVOIDANCE:
        //   Split into right/left sides, sort top-to-bottom by natural LabelYN.
        //   Stack base starts half a spacing unit ABOVE the topmost natural Y so
        //   labels near the top of the pie can spread upward as well as downward.
        //   _rank = 0-based count of labels above this one on the same side.
        //   AdjLabelY = Max(naturalY, stackBase + rank * varLabelSpacing).
        //   varLabelSpacing = 5 (slightly tighter than before for better fit).

        Set(varCharW,        2.3);
        Set(varMaxX,         97);
        Set(varMinX,         3);
        Set(varLabelSpacing, 5);

        Set(
          varSlicesAdjusted,
          If(
            Not(varIsOutside),
            AddColumns(
              varSlices,
              AdjLabelX,   LabelXN,
              AdjLabelY,   LabelYN,
              LabelAnchor, "middle"
            ),

            With(
              {
                _edgeAdj:
                  AddColumns(
                    varSlices,
                    _isRight, Sin(MidAngle) >= 0,
                    _edgeX,
                      If(
                        Sin(MidAngle) >= 0,
                        // Right side: shift left by half the overflow only
                        If(
                          LabelXN + Len(Label) * varCharW > varMaxX,
                          Max(52, LabelXN - (LabelXN + Len(Label) * varCharW - varMaxX) * 0.5),
                          LabelXN
                        ),
                        // Left side: shift right by half the underflow only
                        If(
                          LabelXN - Len(Label) * varCharW < varMinX,
                          Min(48, LabelXN + (varMinX - (LabelXN - Len(Label) * varCharW)) * 0.5),
                          LabelXN
                        )
                      )
                  )
              },

              With(
                {
                  _right: Sort(Filter(_edgeAdj, _isRight),  LabelYN, SortOrder.Ascending),
                  _left:  Sort(Filter(_edgeAdj, !_isRight), LabelYN, SortOrder.Ascending)
                },
                With(
                  {
                    // Stack base starts half a spacing above topmost label
                    // so the top of the stack can spread upward too
                    _rightBase: First(_right).LabelYN - varLabelSpacing * 0.5,
                    _leftBase:  First(_left).LabelYN  - varLabelSpacing * 0.5
                  },
                  Ungroup(
                    Table(
                      {
                        Value:
                          AddColumns(
                            AddColumns(
                              _right,
                              _rank,
                              CountRows(Filter(_right, LabelYN < ThisRecord.LabelYN))
                            ),
                            AdjLabelX,   _edgeX,
                            AdjLabelY,   Max(LabelYN, _rightBase + _rank * varLabelSpacing),
                            LabelAnchor, "start"
                          )
                      },
                      {
                        Value:
                          AddColumns(
                            AddColumns(
                              _left,
                              _rank,
                              CountRows(Filter(_left, LabelYN < ThisRecord.LabelYN))
                            ),
                            AdjLabelX,   _edgeX,
                            AdjLabelY,   Max(LabelYN, _leftBase + _rank * varLabelSpacing),
                            LabelAnchor, "end"
                          )
                      }
                    ),
                    Value
                  )
                )
              )
            )
          )
        );

        // ====
        // SECTION 7: BUILD varSVG
        // ====
        Set(
          varSVG,
          If(
            Or(WedgeTotal <= 0, IsEmpty(varSlices)),

            // Empty state SVG
            "<​svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>" &
            "<​circle cx='50' cy='50' r='48' fill='#F3F4F6' stroke='#E5E7EB' stroke-width='1'/>" &
            "<​path d='M 50 50 L 50 2 A 48 48 0 0 1 91.6 26 Z' fill='#E5E7EB' stroke='#F9FAFB' stroke-width='1.5'/>" &
            "<​path d='M 50 50 L 91.6 26 A 48 48 0 0 1 91.6 74 Z' fill='#DBEAFE' stroke='#F9FAFB' stroke-width='1.5'/>" &
            "<​path d='M 50 50 L 91.6 74 A 48 48 0 0 1 50 98 Z' fill='#E5E7EB' stroke='#F9FAFB' stroke-width='1.5'/>" &
            "<​path d='M 50 50 L 50 98 A 48 48 0 0 1 8.4 74 Z' fill='#DBEAFE' stroke='#F9FAFB' stroke-width='1.5'/>" &
            "<​path d='M 50 50 L 8.4 74 A 48 48 0 0 1 8.4 26 Z' fill='#E5E7EB' stroke='#F9FAFB' stroke-width='1.5'/>" &
            "<​path d='M 50 50 L 8.4 26 A 48 48 0 0 1 50 2 Z' fill='#DBEAFE' stroke='#F9FAFB' stroke-width='1.5'/>" &
            If(
              varHoleR > 0,
              "<​circle cx='50' cy='50' r='" & Text(varHoleR, "[$-en-US]0.0###") &
              "' fill='" & Coalesce(Self.ChartFill, "#FAFAFA") & "'/>",
              ""
            ) &
            "<​/svg>",

            // Data SVG
            "<​svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>" &

            Concat(
              varSlices,
              "<path transform='translate(" &
              Text(OffsetX, "[$-en-US]0.0000") & "," &
              Text(OffsetY, "[$-en-US]0.0000") &
              ")' d='M 50 50 L " &
              X1 & " " & Y1 &
              " A " & Text(varSvgR, "[$-en-US]0.0###") & " " &
                      Text(varSvgR, "[$-en-US]0.0###") & " 0 " &
              If((EndAngle - StartAngle) > Pi(), "1", "0") &
              " 1 " & X2 & " " & Y2 &
              " Z' fill='" & RGBColor &
              "' stroke='" & Coalesce(Self.StrokeColor, "white") &
              "' stroke-width='" & Text(Coalesce(Self.StrokeWidth, 1), "[$-en-US]0.0#") &
              "'/>"
            ) &

            If(
              Coalesce(Self.ShowWedgeLabel, false),
              Concat(
                varSlicesAdjusted,
                If(
                  (EndAngle - StartAngle) >= (Max(0, Coalesce(Self.MinLabelAngle, 10)) * Pi() / 180),
                  "<​text x='" & Text(AdjLabelX, "[$-en-US]0.0000") &
                  "' y='" & Text(AdjLabelY, "[$-en-US]0.0000") &
                  "' text-anchor='" & LabelAnchor &
                  "' dominant-baseline='middle'" &
                  " fill='" & Coalesce(Self.WedgeLabelColor, "white") &
                  "' font-size='" & varLabelFS &
                  "' font-family='Segoe UI' font-weight='600'>" &
                  Label &
                  "<​/text>",
                  ""
                )
              ),
              ""
            ) &

            If(
              varHoleR > 0,
              If(
                ArcScale >= 1,
                "<​circle cx='50' cy='50' r='" & Text(varHoleR, "[$-en-US]0.0###") &
                "' fill='" & Coalesce(Self.ChartFill, "#FAFAFA") & "'/>",
                "<path d='M 50 50 L " &
                Text(50 + varHoleR * Sin(varHoleStartAngle), "[$-en-US]0.0000") & " " &
                Text(50 - varHoleR * Cos(varHoleStartAngle), "[$-en-US]0.0000") &
                " A " & Text(varHoleR, "[$-en-US]0.0###") & " " &
                        Text(varHoleR, "[$-en-US]0.0###") & " 0 " &
                If((varHoleEndAngle - varHoleStartAngle) > Pi(), "1", "0") & " 1 " &
                Text(50 + varHoleR * Sin(varHoleEndAngle), "[$-en-US]0.0000") & " " &
                Text(50 - varHoleR * Cos(varHoleEndAngle), "[$-en-US]0.0000") &
                " Z' fill='" & Coalesce(Self.ChartFill, "#FAFAFA") & "'/>"
              ),
              ""
            ) &

            "<​/svg>"
          )
        );

        // make sure varHoveredKey matches an actual key, otherwise clear it
        If(IsBlank(LookUp(Self.Items, Key = varHoveredKey || X = varHoveredKey)), Set(varHoveredKey, ""));

        // ====
        // SECTION 8: BUILD varButtonSlices
        // ====
        Set(btnW,   2 * PieRadius / gridM);
        Set(btnH,   2 * PieRadius / gridN);
        Set(gridOX, ChartCenterX - PieRadius);
        Set(gridOY, ChartCenterY - PieRadius);
        Set(PieRadiusAdjusted, PieRadius * varSvgR / 50);
        Set(r2, PieRadiusAdjusted * PieRadiusAdjusted);

        Set(
          varButtonSlices,
          ForAll(
            Sequence(gridN * gridM) As cell,

            With(
              {
                _i:    RoundDown((cell.Value - 1) / gridM, 0),
                _j:    Mod(cell.Value - 1, gridM),
                _xMin: gridOX + Mod(cell.Value - 1, gridM) * btnW,
                _yMin: gridOY + RoundDown((cell.Value - 1) / gridM, 0) * btnH
              },

              // ====
              // IMPLEMENTATION A: single center-point Atan2 per cell
              // ====
              /*
              With(
                {
                  _sx: _xMin + btnW / 2,
                  _sy: _yMin + btnH / 2
                },
                With(
                  {
                    _dx:  _sx - ChartCenterX,
                    _ndy: ChartCenterY - _sy,
                    _d2:  Power(_sx - ChartCenterX, 2) + Power(ChartCenterY - _sy, 2)
                  },
                  If(
                    _d2 <= r2 And _d2 > 0,
                    With(
                      {
                        _angle: Mod(
                          If(
                            _ndy > 0,              Atan(_dx / _ndy),
                            _ndy < 0 And _dx >= 0, Atan(_dx / _ndy) + Pi(),
                            _ndy < 0,              Atan(_dx / _ndy) - Pi(),
                            _dx > 0,               Pi() / 2,
                                                  -Pi() / 2
                          ) + 2 * Pi(),
                          2 * Pi()
                        )
                      },
                      {
                        Ni: _i,
                        Mj: _j,
                        SliceOrder:
                          Coalesce(
                            LookUp(
                              varSlices,
                              If(
                                NormStart < NormEnd,
                                _angle >= NormStart And _angle < NormEnd,
                                _angle >= NormStart Or  _angle < NormEnd
                              )
                            ).Order,
                            Blank()
                          )
                      }
                    ),
                    { Ni: _i, Mj: _j, SliceOrder: Blank() }
                  )
                )
              )
              */

              // ====
              // IMPLEMENTATION B: sub-sample majority vote  [ACTIVE]
              // ====
              With(
                {
                  _hits:
                    ForAll(
                      Sequence(sampleSize * sampleSize) As s,
                      {
                        wedge:
                          With(
                            {
                              _sx: _xMin
                                   + (RoundDown((s.Value - 1) / sampleSize, 0) + 0.5)
                                   * btnW / sampleSize,
                              _sy: _yMin
                                   + (Mod(s.Value - 1, sampleSize) + 0.5)
                                   * btnH / sampleSize
                            },
                            With(
                              {
                                _dx:  _sx - ChartCenterX,
                                _ndy: ChartCenterY - _sy,
                                _d2:  Power(_sx - ChartCenterX, 2)
                                      + Power(ChartCenterY - _sy, 2)
                              },
                              If(
                                _d2 <= r2 And _d2 > 0,
                                With(
                                  {
                                    _angle: Mod(
                                      If(
                                        _ndy > 0,              Atan(_dx / _ndy),
                                        _ndy < 0 And _dx >= 0, Atan(_dx / _ndy) + Pi(),
                                        _ndy < 0,              Atan(_dx / _ndy) - Pi(),
                                        _dx > 0,               Pi() / 2,
                                                              -Pi() / 2
                                      ) + 2 * Pi(),
                                      2 * Pi()
                                    )
                                  },
                                  Coalesce(
                                    LookUp(
                                      varSlices,
                                      If(
                                        NormStart < NormEnd,
                                        _angle >= NormStart And _angle < NormEnd,
                                        _angle >= NormStart Or  _angle < NormEnd
                                      )
                                    ).Order,
                                    -1
                                  )
                                ),
                                -1
                              )
                            )
                          )
                      }
                    )
                },

                With(
                  { _valid: CountIf(_hits, wedge <> -1) },
                  If(
                    _valid = 0,
                    { Ni: _i, Mj: _j, SliceOrder: Blank() },
                    With(
                      {
                        _best: First(
                          Sort(
                            AddColumns(
                              varSlices,
                              _cnt,
                              CountIf(_hits, wedge = Order)
                            ),
                            _cnt,
                            SortOrder.Descending
                          )
                        )
                      },
                      {
                        Ni: _i,
                        Mj: _j,
                        SliceOrder:
                          If(
                            _best._cnt / _valid >= threshold,
                            _best.Order,
                            Blank()
                          )
                      }
                    )
                  )
                )
              )
            )
          )
        )
      SelectedSlice: =LookUp(varSlices, Key = varHoveredKey)
      SliceCount: =CountRows(varItemsSorted)
      SvgMarkup: =varSVG
      TotalValue: =Sum(varItemsSorted, Coalesce(Value, 0))
      Width: =400
    Children:
      - cmpPieChart_conRoot:
          Control: GroupContainer@1.5.0
          Variant: ManualLayout
          Properties:
            Height: =Parent.Height
            Width: =Parent.Width
          Children:
            - cmpPieChart_conStatic:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  Height: =Parent.Height
                  Width: =Parent.Width
                Children:
                  - cmpPieChart_conBackground:
                      Control: GroupContainer@1.5.0
                      Variant: ManualLayout
                      Properties:
                        BorderColor: |-
                          =If(
                            Coalesce(cmpPieChart.ChartShadow, DropShadow.Semibold) = DropShadow.None,
                            ColorValue(Coalesce(cmpPieChart.ChartBorderColor, "#E0E0E0")),
                            RGBA(0, 0, 0, 0)
                          )
                        BorderThickness: |-
                          =If(
                            Coalesce(cmpPieChart.ChartShadow, DropShadow.Semibold) = DropShadow.None,
                            1,
                            0
                          )
                        DropShadow: =Coalesce(cmpPieChart.ChartShadow, DropShadow.Semibold)
                        Fill: |-
                          =If(
                            Coalesce(cmpPieChart.ChartFill, "") = "",
                            RGBA(0, 0, 0, 0),
                            ColorValue(cmpPieChart.ChartFill)
                          )
                        Height: |-
                          =varTitleH + ChartSize +
                            If(Coalesce(cmpPieChart.Caption, "") <> "", varCaptionH + 2, 0)
                        RadiusBottomLeft: =6
                        RadiusBottomRight: =6
                        RadiusTopLeft: =6
                        RadiusTopRight: =6
                        Width: =ChartSize
                        X: =ChartCenterX - ChartSize / 2
                        Y: =varPadT
                  - cmpPieChart_imgChart:
                      Control: Image@2.2.3
                      Properties:
                        BorderColor: =RGBA(0, 0, 0, 0)
                        DisabledBorderColor: =RGBA(0, 0, 0, 0)
                        DisabledFill: =RGBA(0, 0, 0, 0)
                        FocusedBorderThickness: =0
                        Height: =ChartSize
                        HoverBorderColor: =RGBA(0, 0, 0, 0)
                        HoverFill: =RGBA(0, 0, 0, 0)
                        Image: ="data:image/svg+xml;utf8," & EncodeUrl(varSVG)
                        PressedBorderColor: =RGBA(0, 0, 0, 0)
                        PressedFill: =RGBA(0, 0, 0, 0)
                        Width: =ChartSize
                        X: =ChartCenterX - ChartSize / 2
                        Y: =ChartCenterY - ChartSize / 2
                  - cmpPieChart_imgHighlight:
                      Control: Image@2.2.3
                      Properties:
                        BorderColor: =RGBA(0, 0, 0, 0)
                        BorderStyle: =BorderStyle.None
                        DisabledBorderColor: =RGBA(0, 0, 0, 0)
                        DisabledFill: =RGBA(0, 0, 0, 0)
                        FocusedBorderThickness: =0
                        Height: =ChartSize
                        HoverBorderColor: =RGBA(0, 0, 0, 0)
                        HoverFill: =RGBA(0, 0, 0, 0)
                        Image: |-
                          =With(
                                                      { _sel: LookUp(varSlices, Key = Coalesce(varHoveredKey, "")) },
                                                      If(
                                                        IsBlank(_sel) Or Coalesce(varHoveredKey, "") = "",
                                                        "",
                                                        "data:image/svg+xml;utf8," &
                                                        EncodeUrl(
                                                        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>" &
                                                        "<path transform='translate(" &
                                                        Text(_sel.OffsetX, "[$-en-US]0.0000") & "," &
                                                        Text(_sel.OffsetY, "[$-en-US]0.0000") &
                                                        ")' d='M 50 50 L " &
                                                        _sel.X1 & " " & _sel.Y1 &
                                                        " A " & Text(varSvgR, "[$-en-US]0.0###") & " " & Text(varSvgR, "[$-en-US]0.0###") & " 0 " &
                                                        If((_sel.EndAngle - _sel.StartAngle) > Pi(), "1", "0") &
                                                        " 1 " &
                                                        _sel.X2 & " " & _sel.Y2 &
                                                        " L 50 50 Z' fill='rgba(255,255,255,0.15)' stroke='white' stroke-width='4' stroke-linejoin='miter'/>" &
                                                        "<path transform='translate(" &
                                                        Text(_sel.OffsetX, "[$-en-US]0.0000") & "," &
                                                        Text(_sel.OffsetY, "[$-en-US]0.0000") &
                                                        ")' d='M 50 50 L " &
                                                        _sel.X1 & " " & _sel.Y1 &
                                                        " A " & Text(varSvgR, "[$-en-US]0.0###") & " " & Text(varSvgR, "[$-en-US]0.0###") & " 0 " &
                                                        If((_sel.EndAngle - _sel.StartAngle) > Pi(), "1", "0") &
                                                        " 1 " &
                                                        _sel.X2 & " " & _sel.Y2 &
                                                        " L 50 50 Z' fill='none' stroke='rgba(0,0,0,0.3)' stroke-width='1.5' stroke-linejoin='miter'/>" &
                                                        "</svg>"
                                                        )
                                                      )
                                                    )
                        PressedBorderColor: =RGBA(0, 0, 0, 0)
                        PressedFill: =RGBA(0, 0, 0, 0)
                        Visible: =Coalesce(varHoveredKey, "") <> ""
                        Width: =ChartSize
                        X: =cmpPieChart_imgChart.X
                        Y: =cmpPieChart_imgChart.Y
                  - cmpPieChart_lblCenterValue:
                      Control: Label@2.5.1
                      Properties:
                        Align: =Align.Center
                        BorderColor: =RGBA(0, 0, 0, 0)
                        Color: =RGBA(50, 49, 48, 1)
                        DisabledColor: =RGBA(161, 159, 157, 1)
                        Font: =Font.'Segoe UI'
                        FontWeight: =FontWeight.Semibold
                        Height: =32
                        PaddingBottom: =0
                        PaddingLeft: =0
                        PaddingRight: =0
                        PaddingTop: =0
                        Text: |-
                          =If(
                            Coalesce(cmpPieChart.CenterLabelText, "") <> "",
                            cmpPieChart.CenterLabelText,
                            Text(WedgeTotal)
                          )
                        Visible: =cmpPieChart.ShowCenterLabel And Not(cmpPieChart.IsItemsEmpty)
                        Width: =PieRadiusAdjusted*2
                        X: =ChartCenterX - PieRadiusAdjusted
                        Y: =ChartCenterY - 16
                  - cmpPieChart_lblCaption:
                      Control: Label@2.5.1
                      Properties:
                        Align: =Align.Center
                        BorderColor: =RGBA(0, 0, 0, 0)
                        Color: =ColorValue(Coalesce(cmpPieChart.CaptionColor, "black"))
                        DisabledColor: =RGBA(161, 159, 157, 1)
                        Font: =Font.'Segoe UI'
                        Height: =varCaptionH
                        PaddingBottom: =0
                        PaddingLeft: =4
                        PaddingRight: =4
                        PaddingTop: =2
                        Size: =11
                        Text: =Coalesce(cmpPieChart.Caption, "")
                        VerticalAlign: =VerticalAlign.Top
                        Visible: =Coalesce(cmpPieChart.Caption, "") <> ""
                        Width: =ChartSize
                        X: =cmpPieChart_imgChart.X
                        Y: =cmpPieChart_imgChart.Y + ChartSize + 2
                  - cmpPieChart_lblTitle:
                      Control: Label@2.5.1
                      Properties:
                        Align: =Align.Center
                        BorderColor: =RGBA(0, 0, 0, 1)
                        BorderStyle: =BorderStyle.None
                        Color: =RGBA(50, 49, 48, 1)
                        DisabledColor: =RGBA(161, 159, 157, 1)
                        Font: =Font.'Segoe UI'
                        FontWeight: =FontWeight.Semibold
                        Height: =varTitleH
                        PaddingBottom: =0
                        PaddingLeft: =0
                        PaddingRight: =0
                        PaddingTop: =0
                        Size: =14
                        Text: =Coalesce(cmpPieChart.ChartTitle, "")
                        VerticalAlign: =VerticalAlign.Top
                        Visible: =Coalesce(cmpPieChart.ChartTitle, "") <> ""
                        Width: =cmpPieChart_conBackground.Width
                        Wrap: =false
                        X: =cmpPieChart_conBackground.X
                        Y: =cmpPieChart_conBackground.Y
                  - cmpPieChart_lblEmptyState:
                      Control: Label@2.5.1
                      Properties:
                        Align: =Align.Center
                        BorderColor: =RGBA(0, 0, 0, 0)
                        Color: =RGBA(161, 159, 157, 1)
                        DisabledColor: =RGBA(161, 159, 157, 1)
                        Font: =Font.'Segoe UI'
                        Height: =ChartSize
                        PaddingBottom: =0
                        PaddingLeft: =0
                        PaddingRight: =0
                        PaddingTop: =0
                        Size: =12
                        Text: =Coalesce(cmpPieChart.EmptyStateText, "No data")
                        Visible: =cmpPieChart.IsItemsEmpty
                        Width: =ChartSize
                        X: =cmpPieChart_imgChart.X
                        Y: =cmpPieChart_imgChart.Y
                  - cmpPieChart_lblAccessible:
                      Control: Label@2.5.1
                      Properties:
                        BorderColor: =RGBA(0, 0, 0, 0)
                        Height: =1
                        PaddingBottom: =0
                        PaddingLeft: =0
                        PaddingRight: =0
                        PaddingTop: =0
                        Size: =1
                        Text: |-
                          =Coalesce(cmpPieChart.AccessibleLabel, "Pie chart") &
                          ". " &
                          Concat(
                            SortByColumns(varItemsSorted, "Order", SortOrder.Ascending),
                            Coalesce(Label, Key, "?") & ": " & Text(Coalesce(Value, 0)) & ", "
                          )
                        Visible: =false
                        Width: =1
            - cmpPieChart_conInteractive:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  BorderStyle: =BorderStyle.None
                  DropShadow: =DropShadow.None
                  Height: =cmpPieChart_imgChart.Height
                  Visible: =!cmpPieChart.IsPrinting
                  Width: =cmpPieChart_imgChart.Width
                  X: =cmpPieChart_imgChart.X
                  Y: =cmpPieChart_imgChart.Y
                Children:
                  - cmpPieChart_galGridVertical:
                      Control: Gallery@2.15.0
                      Variant: BrowseLayout_Vertical_TwoTextOneImageVariant_ver5.0
                      Properties:
                        BorderColor: =RGBA(0, 0, 0, 0)
                        Height: =ChartSize
                        Items: |-
                          =ForAll(
                          Sequence(gridN),
                          { RowIndex: ThisRecord.Value }
                          )
                        ShowScrollbar: =false
                        TemplateSize: =btnH
                        Visible: =Not(IsEmpty(varSlices))
                        Width: =ChartSize
                      Children:
                        - cmpPieChart_galGridHorizontal:
                            Control: Gallery@2.15.0
                            Variant: Horizontal
                            Properties:
                              BorderColor: =RGBA(0, 0, 0, 0)
                              Height: =Parent.TemplateHeight
                              Items: |-
                                =ForAll(
                                Sequence(gridM) As ColRecord,
                                With(
                                {
                                _order: LookUp(
                                varButtonSlices,
                                Ni = ThisItem.RowIndex - 1 And Mj = ColRecord.Value - 1
                                ).SliceOrder
                                },
                                With(
                                {
                                _slice: If(Not(IsBlank(_order)), LookUp(varSlices, Order = _order))
                                },
                                {
                                RowIndex: ThisItem.RowIndex,
                                ColIndex: ColRecord.Value,
                                Slice:    _slice
                                }
                                )
                                )
                                )
                              ShowScrollbar: =false
                              TemplatePadding: =0
                              TemplateSize: =btnW
                              Width: =Parent.TemplateWidth
                            Children:
                              - cmpPieChart_btnGridHit:
                                  Control: Classic/Button@2.2.0
                                  Properties:
                                    BorderColor: =RGBA(0, 0, 0, 0)
                                    BorderStyle: =BorderStyle.None
                                    Color: =RGBA(255, 255, 255, 1)
                                    DisabledBorderColor: =RGBA(0, 0, 0, 0)
                                    DisabledColor: =RGBA(161, 159, 157, 1)
                                    DisabledFill: =RGBA(0, 0, 0, 0)
                                    DisplayMode: |-
                                      =If(
                                      Not(IsBlank(ThisItem.Slice)) And Not(IsEmpty(varSlices)),
                                      DisplayMode.Edit,
                                      DisplayMode.Disabled
                                      )
                                    Fill: |-
                                      =RGBA(
                                          Value(Hex2Dec(Mid(ThisItem.Slice.RGBColor,2,2))),
                                          Value(Hex2Dec(Mid(ThisItem.Slice.RGBColor,4,2))),
                                          Value(Hex2Dec(Mid(ThisItem.Slice.RGBColor,6,2))),
                                          0 //0.1
                                      )
                                    Font: =Font.'Segoe UI'
                                    Height: =Parent.TemplateHeight
                                    HoverBorderColor: =RGBA(0, 0, 0, 0)
                                    HoverColor: =RGBA(255, 255, 255, 1)
                                    HoverFill: |-
                                      =RGBA(
                                          Value(Hex2Dec(Mid(ThisItem.Slice.RGBColor,2,2))),
                                          Value(Hex2Dec(Mid(ThisItem.Slice.RGBColor,4,2))),
                                          Value(Hex2Dec(Mid(ThisItem.Slice.RGBColor,6,2))),
                                          0.1
                                      )
                                    OnSelect: |-
                                      =Set(varHoveredKey, ThisItem.Slice.Key);
                                      If(varHoveredKey <> "", cmpPieChart.OnSliceSelect())
                                    PressedBorderColor: =RGBA(0, 69, 120, 1)
                                    PressedColor: =RGBA(255, 255, 255, 1)
                                    PressedFill: |-
                                      =RGBA(
                                          Value(Hex2Dec(Mid(ThisItem.Slice.RGBColor,2,2))),
                                          Value(Hex2Dec(Mid(ThisItem.Slice.RGBColor,4,2))),
                                          Value(Hex2Dec(Mid(ThisItem.Slice.RGBColor,6,2))),
                                          0.7
                                      )
                                    RadiusBottomLeft: =0
                                    RadiusBottomRight: =0
                                    RadiusTopLeft: =0
                                    RadiusTopRight: =0
                                    Text: =""
                                    Tooltip: =Coalesce(ThisItem.Slice.tooltip, "")
                                    Width: =Parent.TemplateWidth
      - cmpPieChart_timerReset:
          Control: Timer@2.1.0
          Properties:
            AutoStart: =true
            BorderColor: =RGBA(0, 120, 212, 1)
            BorderStyle: =BorderStyle.None
            Color: =RGBA(255, 255, 255, 1)
            DisabledBorderColor: =RGBA(242, 242, 241, 0)
            DisabledColor: =RGBA(161, 159, 157, 1)
            DisabledFill: =RGBA(242, 242, 241, 0)
            Duration: =10
            Fill: =RGBA(0, 120, 212, 0)
            Font: =Font.'Segoe UI'
            Height: =0
            HoverBorderColor: =RGBA(16, 110, 190, 1)
            HoverColor: =RGBA(255, 255, 255, 1)
            HoverFill: =RGBA(16, 110, 190, 0)
            OnTimerEnd: =Reset(Parent);
            PressedBorderColor: =RGBA(16, 110, 190, 1)
            PressedColor: =RGBA(255, 255, 255, 1)
            PressedFill: =RGBA(16, 110, 190, 0)
            Text: ="" //Text(Time(0, 0, Self.Value/1000), "hh:mm:ss")
            Visible: =false
            Width: =1
      - btnReset_cmpPieChart:
          Control: Button@0.0.45
          Properties:
            Height: =If(Self.Visible, 22, 1)
            OnSelect: =Reset(Parent)
            Visible: =debugResetVisible  || true
            Width: =If(Self.Visible,50,1)
            X: =10
            Y: =10