jtheiller / quickchart-pascal Goto Github PK

1.0 1.0 0.0 244 KB

Chart image and QR code web API

License: MIT License

Pascal 100.00%

api-client chart chart-image component component-library delphi pascal

quickchart-pascal's Introduction

program ProjectForeverAlive;

{$APPTYPE CONSOLE}

uses
  SysUtils;

type
  IDeveloper = interface['{4E9E0CB0-49AC-4455-9CFA-D5E2724E9B80}']
  end;

  IMachine = interface['{9C45ADC2-08C2-4D9E-BEA3-BEE87AF7A718}']
  end;

  IHumam = interface(IMachine)['{BF7B51A1-2A23-4E9C-8FE4-B4EDB08BFF05}']
  function IsAlive: Boolean;
  end;

  THumam = class(TInterfacedObject, IHumam, IMachine, IDeveloper)
  private
    FName: String;
  public
    constructor Create(AName: String);
    procedure Start;
    function IsAlive: Boolean;
    property Name: String read FName;
  end;

{ THuman }

function THumam.IsAlive: Boolean;
const
  Forever = True;
begin
  Result := Forever;
end;

procedure THumam.Start;
begin
  while IsAlive do
  begin
    WriteLn( Format('%s: %s: %s',[FormatDateTime('YYYY/MM/DD - HH:MM:SS',Now), Name, 'another new idea...']) );
  end;
end;

constructor THumam.Create(AName: String);
begin
  inherited Create;
  FName := AName;
end;

begin
  THumam.Create('Joathan Theiller').Start;
end.

quickchart-pascal's People

Contributors

Stargazers

Watchers

quickchart-pascal's Issues

Implementar todas as propriedades de options

Implementar options.layout

https://www.chartjs.org/docs/2.9.4/configuration/layout.html

Implementar Chart Title

Criar objeto options, que contem vários atributos sobre o titulo:
https://www.chartjs.org/docs/2.9.4/configuration/title.html

Exemplo:

{
  "type": "bar",
  "data": {
    "labels": ["Q1","Q2","Q3","Q4"],
    "datasets": [
      {
        "label": "Users",
        "data": [50,60,70,180]
      }
    ]
  },
  "options": {
    "title": {
      "display": true,
      "text": "Basic chart title"
    }
  }
}

Criar projeto com uso do gerenciador de dependencias BOSS

Deve ser utilizado o gerenciador de dependências BOSS.
https://github.com/HashLoad/boss
boss init
Diretório: ./src

Realizar download e apresentar a imagem

É necessário realizar o download da imagem processada conforme dados encaminhados via URL.

Observações:

Protocolo Https
Usar MemoryStream
Imagem PNG

Exemplo de requisição URL:

https://quickchart.io/chart?c={type:'bar',data:{labels:['January','February','March','April','May'],datasets:[{label:'Dogs',data:[50,60,70,180,190]},{label:'Cats',data:[100,200,300,400,500]}]}}

Conteudo chart json deve ser passado como encode na URL

Criar classe para tratar Chart API Parameters

chart: Javascript/JSON definition of the chart. Use a Chart.js configuration object. Abbreviated as "c"
width=500: Width of the image. Abbreviated as "w"
height=300: Height of the image. Abbreviated as "h"
devicePixelRatio=2.0: Device pixel ratio of the output (defaults to retina=2.0). Width and height are multiplied by this value.
backgroundColor=transparent: Background of the chart canvas. Accepts rgb (rgb(255,255,120)), colors (red), and URL-encoded hex values (%23ff00ff). Abbreviated as "bkg"
format=png: Format of your output. Supported output formats are PNG, WebP, SVG, and PDF. Abbreviated as "f"
encoding=url: Encoding of your "chart" parameter. Accepted values are url and base64.
version=2.9.4: Chart.js version. Defaults to latest 2.x.x. Setting version to 3 enables latest stable Chart.js v3 support (see documentation). Abbreviated as "v"

Mapear classe mínima para preenchimento do exemplo teste e converter em JsonText

Criar as classes necessárias para o mapeamento dos objetos DTO para transformar em JsonText conforme modelo abaixo:

{
  "type":"bar",
  "data":{
    "labels":["January","February","March","April","May"],
    "datasets":[
      {
        "label":"Dogs",
        "data":[50,60,70,180,190]
      },
      {
        "label":"Cats",
        "data":[100,200,300,400,500
        ]
      }
    ]
  }
}

As linhas de grade do gráfico são personalizáveis definindo atributos em options.scales.<xAxes/yAxes>.gridLines . Esta configuração é muito flexível. Por exemplo, você pode alterar a cor, o tamanho e o estilo das linhas de grade (por exemplo, tornando-as pontilhadas ou tracejadas)

{
   "type":"bar",
   "data":{
      "labels":["Q1","Q2","Q3","Q4"],
      "datasets":[
         {
            "label":"Users",
            "data":[50,60,70,180]
         }
      ]
   },
   "options":{
      "scales":{
         "yAxes":[
            {
               "gridLines":{
                  "display":false
               }
            }
         ]
      }
   }
}

Implementar options.legend

https://www.chartjs.org/docs/2.9.4/configuration/legend.html