PIE-CHART (Sonstige Elemente )

src/app/shared/components/pie-chart/templates

Demo Section

Each variation will be presented in the following section.

Default

Head of the pie chart
Text before the pie chart
Text after the pie chart

Readme

pieChart (component)

Description

Component create a responsive pie chart with values between 0 - 100.

Requirements

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/pie-chart

Fields

pie-chart.hbs

Settings

Parameter Type Default Description
settings.pieChartClasses String '' Modifier classes for component
settings.pieChartContextClass String 'default' Context class of component

Content

Parameter Type Description
content.headline String Headline of the pie chart
content.text-prae String Description of the pie chart
content.text-post String Legend after the pi chart
content.piechartbox Object Object with properties to make settings for the pie chart

pie-chart__box.hbs

Content

Parameter Type Description
piechartbox.chart-value String Value of the pie chart
piechartbox.chart-title String Title of the pie chart
piechartbox.chart-unit String Unit of the pie chart

JavaScript Options

The module gives you the possibility to override default options:

Option Type Default Description
classes.activeClass String 'is-inview' Define that the pie chart animation was shown in View class for pie chart elements
classes.activeClass String 'is-inactivesvg' Define that the pie chart is not in action for pie chart elements (in use for Print-, Screenreaderversion, )
classes.activeClass String 'is-activesvg' Define that the pie chart is in action for pie chart elements
pieChartOptions Object Define a object for the pie chart with relevant informations
selectors.piechartContainer String '[data-js-item="piechart__js__container"]' Define the element for pie chart

SASS

Variables

There are multiple variables which you can change:

Variable Value Description

Modifier Classes

There are modifier classes you can add to pie-chart__container:

Modifier Description
is-inview For the pie chart in Viewport
is-inactivesvg For the inactive pie chart
is-activesvg For the active animated pie chart

Templates

pie-chart.hbs

<div class="c-pie-chart{{#if settings.pieChartContextClass}}--{{settings.pieChartContextClass}}{{else}}--default{{/if}}{{#if settings.pieChartClasses}} {{settings.pieChartClasses}}{{/if}}"
     data-css="c-pie-chart" data-js-module="pie-chart"{{#if 
     settings.pieChartJsOptions}}
     data-js-options='{{stringify settings.pieChartJsOptions}}'{{/if}}>
        {{#if content.headline}}<div class="pie-chart__headline">{{content.headline}}</div>{{/if}}
        {{#if content.text-prae}}<div class="pie-chart__text-prae">{{content.text-prae}}</div>{{/if}}
        <div class="pie-chart__wrapper">
            {{#if (isObject content.piechartbox)}}
                {{> pie-chart__box content.piechartbox}}
            {{/if}}
        </div>
        {{#if content.text-post}}<div class="pie-chart__text-post">{{content.text-post}}</div>{{/if}}
</div>

Data File

pie-chart.hjson

{
	"title": "Pie Chart",
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"pieChartContextClass": "default",
				"pieChartClasses": ""
			},
			"content": {
				"headline": "Head of the pie chart",
				"text-prae": "Text before the pie chart",
				"text-post": "Text after the pie chart",
				"piechartbox": {
					"chart-value": "90",
					"chart-title": "Pie chart with 90%",
					"chart-unit": "%"
				}
			}
		}
	}
}

Styles

pie-chart.scss

/* ===================================================
component: pie-chart
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-pie-chart"] {

	.pie-chart__headline {
		font-family: $font-bold;
	}

	.pie-chart__text-prae {
		font-family: $font-light;
	}

	.pie-chart__headline,
	.pie-chart__text-prae {
		font-size: 1.7rem;
		line-height: (24/17);
		letter-spacing: .03rem;

		@include bp($bp-tablet-p) {
			font-size: 1.8rem;
			line-height: (25/18);
			letter-spacing: .03rem;
		}

		@include bp($bp-desktop-m) {
			font-size: 2rem;
			line-height: (28/20);
			letter-spacing: .03rem;
		}
	}

	.pie-chart__text-post {
		position: relative;
		padding: 0 0 0 22px;
		font-size: 1.2rem;
		line-height: (17/12);
		letter-spacing: .05rem;
		font-family: $font-regular;

		@include print() {
			padding: 0;
		}

		&::before {
			@include pseudo();
			top: 2px;
			left: 0;
			width: 12px;
			height: 12px;
			background-color: $color-green;

			@include print() {
				position: static;
				top: 0;
				left: 0;
				width: 0;
				height: 0;
			}
		}
	}

	.pie-chart__wrapper {
		position: relative;
		width: 100%;
		padding: 0;
		margin-bottom: 5px;
	}

	.pie-chart__container {
		display: inline-block;
		position: relative;
		width: 100%;
		padding-bottom: 100%;
		vertical-align: middle;
		overflow: hidden;
		margin: 0;

		&.is-inactivesvg {

			.pie-chart__svg-text {
				display: none;
			}

			.pie-chart__svg-slice {
				display: none;
			}
		}

		&.is-activesvg {

			.pie-chart__svg-text {
				@include print() {
					display: none;
				}
			}

			.pie-chart__svg-textresult {
				display: none;

				@include print() {
					display: block;
				}
			}

			.pie-chart__svg-slice {
				@include print() {
					display: none;
				}
			}

			.pie-chart__svg-sliceresult {
				display: none;

				@include print() {
					display: block;
				}
			}
		}

		.pie-chart__svg {
			display: inline-block;
			position: absolute;
			top: 0;
			left: 0;
		}

		.pie-chart__svg-rect {
			fill: $color-white;
			fill-opacity: 0;

			@include hcm() {
				fill-opacity: 1;
			}

			@include print() {
				fill-opacity: 1;
			}
		}

		.pie-chart__svg-text,
		.pie-chart__svg-textresult {
			font-family: $font-bold;
			fill: $color-black;
			text-anchor: middle;
		}

		.pie-chart__svg-slice,
		.pie-chart__svg-sliceresult {
			fill: none;
			stroke: $color-green;

			@include hcm() {
				stroke: $color-black;
			}

			@include print() {
				stroke: $color-black;
			}
		}

		.pie-chart__svg-innercircle {
			fill: $color-light;

			@include hcm() {
				fill: $color-white;
			}

			@include print() {
				fill: $color-white;
			}
		}

		.pie-chart__svg-circle {
			fill: $color-white;
		}
	}

	.pie-chart__print {
		display: none;
		font-size: 0;

		@include print() {
			display: block;
		}
	}
}

HTML Output

Default

<div class="c-pie-chart--default" data-css="c-pie-chart" data-js-module="pie-chart">
	<div class="pie-chart__headline">Head of the pie chart</div>
	<div class="pie-chart__text-prae">Text before the pie chart</div>
	<div class="pie-chart__wrapper">
		<div class="pie-chart__container is-inactivesvg" data-js-item="piechart__js__container" data-value="90" data-title="Pie chart with 90%" data-unit="%"></div>
	</div>
	<div class="pie-chart__text-post">Text after the pie chart</div>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link