<optinomic-profile-chart>

<optinomic-profile-chart> creates awesome Profile-Charts for Optinomic-Apps.
This is basically a rewrite of the polymer element <optinomic-chart-profile> in Vue using AMcharts.

Example (Scales)

Example (Single Scale)

Porperties - Descripiton

You can browse examples of <optinomic-profile-chart> inside this repository @ ./src/assets/chart_config.
Also check the description below:

Options | Example

var options = {
    "min": "auto",
    "max": "auto",
    "item_height": 50,
    "item_text_left": 100,
    "item_text_right": 120,
    "color_skin": "default",
    "color_grid": "#9E9E9E",
    "color_clinic_sample": "#673AB7",
    "show_baseline": true,
    "show_scale_text": true,
    "show_score_vertical_line": false,
    "show_score_profile_line": true,
    "show_score_circles": true,
    "show_settings_block": true,
    "show_ranges_overview": true,
    "show_range_text": true,
    "allow_toggle_settings_block": false,
    "range_alpha": 0.1,
    "vertical_grid_every_x": 1,
    "norm_sample": "Z-Werte wurden aufgrund der Normstichprobe nach Ottiger (2020) berechnet (N=3500).",
    "response_title_path": "calculation.info.mz.mz_typ",
    "response_date_path": "calculation.info.filled",
    "dropout": "calculation.info.mz.dropout",
    "dropout_reason": "calculation.info.mz.dropout_reason"
};

Options | Details

The following Properties are supported:

Property	Description
min	"auto" will find the min/max automatically for you. You can also hardcode the min or max by setting it as a number. Default: "auto"
max	"auto" will find the min/max automatically for you. You can also hardcode the min or max by setting it as a number. Default: "auto"
item_height	The height (px) of every scale from scales. Default: 50
item_text_left	Space (px) of left axis
item_text_right	Space (px) of right axis
color_clinic_sample	Color for the Clinic Sample with a fillOpacity = 0.4
show_score_vertical_line	Display vertical score lines in profiles? Default: false
show_score_circles	Display score bullets in profiles? Default: true
show_range_text	new Display vertical Range Interpretations? Default: false
range_alpha	fillOpacity of Range Interpretations Colors. Default: 0.3
response_title_path	Path to value: Expects a String - How should the measurement be called?
response_date_path	Path to value: Expects a String - What ist the date of the measurment?
dropout	Path to value: Expects a boolean - Is this measurement a dropout?
dropout_reason	Path to value:: Expects a String - Reason for the dropout?

Clinic Samples

var clinic_samples = {
  . . .
};

To minify given clinic_samples - check:

Demo: http://clinicsamplesminifier.optinomic.org/
Github: https://github.com/ottigerb/clinicsamples_minifier/

Start (Depreciated)

Compared to <optinomic-chart-profile>, this option is no longer supported.

var start = {
  . . .
};

Development

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.