Storybook.Web

Home

Title	Weather Chart
Description	Weather Chart POC
Namespace	AccuWeather.Core.UI.Web.Views.Charts.WeatherChart

Name	Control
Id	hourly-forecast
Dark Mode	TrueFalse
Title	Next 12 Hours
TickWidth	52
ChartHeight	166
TopOffset	65
BottomOffset	10
Datasets	Name hourly-forecast Type Color Type Data [ { "DataValue": 27, "SubLabel": "27°", "TopLabel": "8 AM", "IconCode": 18 }, { "DataValue": 29, "SubLabel": "29°", "TopLabel": "9 AM", "IconCode": 18 }, { "DataValue": 31, "SubLabel": "31°", "TopLabel": "10 AM", "IconCode": 18 }, { "DataValue": 34, "SubLabel": "34°", "TopLabel": "11 AM", "IconCode": 18 }, { "DataValue": 36, "SubLabel": "36°", "TopLabel": "12 PM", "IconCode": 18 }, { "DataValue": 37, "SubLabel": "37°", "TopLabel": "1 PM", "IconCode": 18 }, { "DataValue": 36, "SubLabel": "36°", "TopLabel": "2 PM", "IconCode": 18 }, { "DataValue": 36, "SubLabel": "36°", "TopLabel": "3 PM", "IconCode": 18 }, { "DataValue": 32, "SubLabel": "32°", "TopLabel": "4 PM", "IconCode": 18 }, { "DataValue": 34, "SubLabel": "34°", "TopLabel": "5 PM", "IconCode": 18 }, { "DataValue": 30, "SubLabel": "30°", "TopLabel": "6 PM", "IconCode": 18 }, { "DataValue": 31, "SubLabel": "31°", "TopLabel": "7 PM", "IconCode": 18 } ]

.component-container {
	width: 352px;
}

.weather-chart[data-chart-id='hourly-forecast'] text.sub-label {
	font-size: 16px;
	font-weight: 500;
}

.weather-chart[data-chart-id='hourly-forecast'] .weather-chart-title {
	color: rgba(255, 255, 255, 0.6);
}

.weather-chart[data-chart-id='hourly-forecast'] .data-charts text.top-label {
	font-size: 11px;
	letter-spacing: -0.055px;
}

.weather-chart[data-chart-id='hourly-forecast'] .pill {
	fill: #fff;
}

.weather-chart[data-chart-id='hourly-forecast'] .data-icon {
	transform: translateY(5px);
}

.weather-chart[data-chart-id='hourly-forecast'] g[data-index='1'] .top-label {
	fill: #212121;
}

.weather-chart g.chart-quarter-day-realfeel circle {
	fill: #fff;
	r: 2px;
	stroke: #25292f;
	stroke-width: 1px;
}

.weather-chart .data-charts g.chart-quarter-day-realfeel path {
	stroke: rgba(255, 255, 255, 0.6);
	stroke-dasharray: 0.5 5;
	stroke-linecap: round;
}

.weather-chart g.chart-quarter-day-realfeel .sub-label {
	font-size: 14px;
	opacity: 0.6;
	font-weight: 500;
}

Run Tests

Html Code

CSS code

Scripts