Weekly Line Chart (SVG no Power Apps)

#powerapps #powerplatform

"data:image/svg+xml;utf8," & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 140 70' shape-rendering='geometricPrecision' text-rendering='optimizeLegibility'>
  <title>Weekly line chart</title>
  <style>
    .grid { stroke: rgba(0,0,0,0); stroke-width: 0.4; }
    .axis-x { stroke: #d2d2d2; stroke-width: 0; }
    .line { stroke: #7551ff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .pt { fill: #ffffff; stroke: #7551ff; stroke-width: 1.2 }
    .label { font-family: Trebuchet MS, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 4px; fill: #2D396B; }
    .value { font-family: Trebuchet MS, sans-serif; font-size: 4px; fill: #7551ff; }
  </style>

  <!-- grade -->
  <g class='grid'>
    <path d='M6 62.5 H134'/><path d='M6 41.5 H134'/><path d='M6 20.5 H134'/>
  </g>

  <!-- eixo X -->
  <line x1='6' y1='64' x2='134' y2='64' class='axis-x'/>

  <!-- linha suavizada -->
  <path class='line'
        d='M6,62.15
           C9.55,57.84 20.22,38.31 27.33,36.31
           C34.44,34.31 41.56,52.30 48.67,50.15
           C55.78,47.99 62.89,27.23 70.00,23.38
           C77.11,19.54 84.22,22.03 91.33,27.08
           C98.44,32.13 105.56,55.51 112.67,53.66
           C119.78,51.81 130.44,22.28 134.00,16.00'
        pathLength='100' stroke-dasharray='100' stroke-dashoffset='100'>
    <animate attributeName='stroke-dashoffset' dur='1.6s' begin='0s'
             values='100;0' keyTimes='0;1' calcMode='spline'
             keySplines='.25 .1 .25 1' fill='freeze'/>
  </path>

  <!-- pontos + valores (deslocados para caber bem) -->
  <g>
    <circle class='pt' cx='6' cy='62.15' r='1'/><text class='value' x='6' y='57' text-anchor='middle'>1</text>
    <circle class='pt' cx='27.33' cy='36.31' r='1'/><text class='value' x='27.33' y='31' text-anchor='middle'>15</text>
    <circle class='pt' cx='48.67' cy='50.15' r='1'/><text class='value' x='48.67' y='45' text-anchor='middle'>7.5</text>
    <circle class='pt' cx='70' cy='23.38' r='1'/><text class='value' x='70' y='18' text-anchor='middle'>22</text>
    <circle class='pt' cx='91.33' cy='27.08' r='1'/><text class='value' x='91.33' y='22' text-anchor='middle'>20</text>
    <circle class='pt' cx='112.67' cy='53.66' r='1'/><text class='value' x='112.67' y='48' text-anchor='middle'>5.6</text>
    <circle class='pt' cx='134' cy='16' r='1'/><text class='value' x='134' y='11' text-anchor='middle'>26</text>
  </g>

  <!-- rótulos do eixo X -->
  <g class='label' text-anchor='middle'>
    <text x='6' y='69' text-anchor='start'>Mon</text>
    <text x='27.33' y='69'>Tue</text>
    <text x='48.67' y='69'>Wed</text>
    <text x='70' y='69'>Thr</text>
    <text x='91.33' y='69'>Fri</text>
    <text x='112.67' y='69'>Sat</text>
    <text x='134' y='69' text-anchor='end'>Sun</text>
  </g>
</svg>")

Criei um gráfico de linha semanal 100% em SVG, com animação e rótulos. Ele renderiza direto em um controle Image – sem componentes externos.

Como usar

Adicione um Image à tela.
Na propriedade Image, cole o conteúdo do bloco de código abaixo (começa com data:image/svg+xml;utf8, + EncodeUrl(...)).
Ajuste o tamanho do Image (ex.: Largura 400 / Altura 200) para manter a proporção.
Valores: edite os números nos e (ex.: 1, 15, 7.5, 22, ...).

DEV Community

Weekly Line Chart (SVG no Power Apps)

Top comments (0)