drivardxrm / Sparkline.PCF

Beautiful and expressive PCF sparkline control based on react-sparklines.

Sparkline.PCF

Sparkline PCF (PowerApps Component framework) Control based on react-sparlines)

Will display an array of numbers as a sparkline.

Dependencies

react-sparklines : http://borisyankov.github.io/react-sparklines/

Parameters

Parameter	Description	Default
Values	Array of numbers to display.
Separator	Separator between each values	,
Color	Color of the sparkline. Supports literal (ex. blue, red) and RGBA color codes (ex. #da9494)	blue
Height	Height in pixels	100
Width	Width in pixel (250 max)	250
Min	Min value (Optional, leave blank for auto-scale)
Max	Max value (Optional, leave blank for auto-scale)
SparkType	Type of the sparkline (Line, Rounded, Bars)	Line
Fill	Fill under the line (true, false)	true
ReferenceLine	Display a reference line (true, false)	false
ReferenceLineType	Type of the reference line (Mean, Avg, Min, Max, Median)	Mean

Screenshots

Installation

You can install the component directly from solution files containes in the 'Release' section https://github.com/drivardxrm/Sparkline.PCF/releases

Get required tools

To use Microsoft PowerApps CLI, do the following:

• Install Npm (comes with Node.js) or install Node.js (comes with npm). We recommend LTS (Long Term Support) version 10.15.3 LTS as it seems to be most stable.

• Install .NET Framework 4.6.2 Developer Pack.

• If you don’t already have Visual Studio 2017 or later, follow one of the options below:

  • Option 1: Install Visual Studio 2017 or later.
  • Option 2: Install .NET Core 2.2 SDK and then install Visual Studio Code.

• Install Microsoft PowerApps CLI.

Be sure to update your Microsoft PowerApps CLI to the latest version:

pac install latest

Build the control

• Clone the repo/ download the zip file.
• Navigate to ./TimePicker/ folder.
• Copy the folder path and open it in visual studio code.
• Open the terminal, and run the command the following command to install the project dependencies:

npm install

Then run the command:

npm run start

Build the solution

• Create a new solution folder and open the Developer command prompt.
• Change the directory to the newly created folder in previous step.
• Init the future solution:

pac solution init --publisherName someName --customizationPrefix someSolutionPrefix

• Add the control to your future solution:

pac solution add-reference --path provide path of control project folder where the pcf.proj is available

• Build 1/2:

msbuild /t:restore

• Build 2/2:

msbuild

• You will have the solution file in SolutionFolder/bin/debug folder!

If you want to change the solution type you have to edit the .cdsproj file:

Solution Packager overrides, un-comment to use: SolutionPackagerType (Managed, Unmanaged, Both)
  <PropertyGroup>
    <SolutionPackageType>Managed</SolutionPackageType>
  </PropertyGroup>