client-scores.html

{% comment %}
	Client scores.
	Building an array of the global score pour each client family.
{% endcomment %}
{% assign client-scores-families = "" | split: '' %}
{% assign client-scores-y = "" | split: '' %}
{% assign client-scores-a = "" | split: '' %}
{% assign client-scores-n = "" | split: '' %}
{% assign client-scores-u = "" | split: '' %}
{% comment %}
	1. We go through each existing feature.
{% endcomment %}
{% for feature in site.features %}
	{% assign feature-stats = feature.stats %}
	{% comment %}
		2. We go through each family of the current feature.
	{% endcomment %}
	{% for family in feature.stats %}
		{% assign family-key = family | first %}
		{% assign family-values = feature.stats[family-key] %}
		{% assign client-index = 0 %}
		{% comment %}
			3. We go through each platform of the current family and
			keep track of the support value for the most recent version.
		{% endcomment %}
		{% for platform in family-values %}
			{% assign platform-key = platform | first %}
			{% assign platform-values = platform | last %}
			{% comment %}
				4. We add the family:platform to the `client-scores-families` array if it doesn't exist yet.
			{% endcomment %}
			{% assign family-platform-key = '' | split: '' %}
			{% assign family-platform-key = family-platform-key | push: family-key %}
			{% assign family-platform-key = family-platform-key | push: platform-key %}
			{% assign family-platform-key = family-platform-key | join: ':' %}
			{% unless client-scores-families contains family-platform-key %}
				{% assign client-scores-families = client-scores-families | push: family-platform-key %}
				{% assign client-scores-y = client-scores-y | push: 0 %}
				{% assign client-scores-a = client-scores-a | push: 0 %}
				{% assign client-scores-n = client-scores-n | push: 0 %}
				{% assign client-scores-u = client-scores-u | push: 0 %}
				{% assign client-index = client-scores-families.size | minus: 1 %}
			{% else %}
				{% comment %}
					If the family already exists, we get its index in the `client-scores-families` array.
				{% endcomment %}
				{% for client-scores-family in client-scores-families %}
					{% if client-scores-family == family-platform-key %}
						{% assign client-index = forloop.index | minus: 1 %}
					{% endif %}
				{% endfor %}
			{% endunless %}
			{% comment %}
				5. We pick the latest version for the current platform.
				And we add a point to its corresponding value in `client-scores-x-value` value.
			{% endcomment %}
			{% for version in platform-values %}
				{% if forloop.last == true %}
					{% assign version-key = version | first %}
					{% assign version-values = version | last | split: ' ' | first %}
					{% case version-values %}
						{% when 'y' %}
						{% comment %}
							Because liquid doesn't allow to change an array's value (like `a[b]=c`),
							we need to create a new temporary array and reassign all values. Yikes.
						{% endcomment %}
							{% assign new-client-scores-y = '' | split:'' %}
							{% for client-scores-y-value in client-scores-y %}
								{% assign i = forloop.index | minus:1 %}
								{% assign new-value = client-scores-y[i] %}
								{% if i == client-index %}
									{% assign new-value = client-scores-y[client-index] | plus:1 %}
								{% endif %}
								{% assign new-client-scores-y = new-client-scores-y | push:new-value %}
							{% endfor %}
							{% assign client-scores-y = new-client-scores-y %}
						{% when 'a' %}
							{% assign new-client-scores-a = '' | split:'' %}
							{% for client-scores-a-value in client-scores-a %}
								{% assign i = forloop.index | minus:1 %}
								{% assign new-value = client-scores-a[i] %}
								{% if i == client-index %}
									{% assign new-value = client-scores-a[client-index] | plus:1 %}
								{% endif %}
								{% assign new-client-scores-a = new-client-scores-a | push:new-value %}
							{% endfor %}
							{% assign client-scores-a = new-client-scores-a %}
						{% when 'n' %}
							{% assign new-client-scores-n = '' | split:'' %}
							{% for client-scores-n-value in client-scores-n %}
								{% assign i = forloop.index | minus:1 %}
								{% assign new-value = client-scores-n[i] %}
								{% if i == client-index %}
									{% assign new-value = client-scores-n[client-index] | plus:1 %}
								{% endif %}
								{% assign new-client-scores-n = new-client-scores-n | push:new-value %}
							{% endfor %}
							{% assign client-scores-n = new-client-scores-n %}
						{% when 'u' %}
							{% assign new-client-scores-u = '' | split:'' %}
							{% for client-scores-u-value in client-scores-u %}
								{% assign i = forloop.index | minus:1 %}
								{% assign new-value = client-scores-u[i] %}
								{% if i == client-index %}
									{% assign new-value = client-scores-u[client-index] | plus:1 %}
								{% endif %}
								{% assign new-client-scores-u = new-client-scores-u | push:new-value %}
							{% endfor %}
							{% assign client-scores-u = new-client-scores-u %}
					{% endcase %}
				{% endif %}
			{% endfor %}
		{% endfor %}
	{% endfor %}
{% endfor %}
{% comment %}
	6. We sort all our scores based on the ones with the most `y` values.
{% endcomment %}
{% assign client-scores-sorted = "" | split: '' %}
{% for client in client-scores-families %}
	{% assign i = forloop.index | minus:1 %}
	{% assign client-scores-sorted-y = client-scores-y[i] | prepend: '0000' | slice: -4, 4 %}
	{% assign client-scores-sorted-a = client-scores-a[i] | prepend: '0000' | slice: -4, 4 %}
	{% assign client-scores-sorted-n = client-scores-n[i] | prepend: '0000' | slice: -4, 4 %}
	{% assign client-scores-sorted-u = client-scores-u[i] | prepend: '0000' | slice: -4, 4 %}
	{% assign client-sorted-string = client-scores-sorted-y | append:'|' | append:client-scores-sorted-a | append:'|' | append:client-scores-sorted-n | append:'|' | append:client-scores-sorted-u | append:'|' | append:client-scores-families[i] %}
	{% assign client-scores-sorted = client-scores-sorted | push: client-sorted-string %}
{% endfor %}
{% assign client-scores-sorted = client-scores-sorted | sort | reverse %}
{% assign client-scores-families = "" | split: '' %}
{% assign client-scores-y = "" | split: '' %}
{% assign client-scores-a = "" | split: '' %}
{% assign client-scores-n = "" | split: '' %}
{% assign client-scores-u = "" | split: '' %}
{% for client in client-scores-sorted %}
	{% assign client-sorted-array = client | split: '|' %}
	{% assign client-scores-y = client-scores-y | push: client-sorted-array[0] %}
	{% assign client-scores-a = client-scores-a | push: client-sorted-array[1] %}
	{% assign client-scores-n = client-scores-n | push: client-sorted-array[2] %}
	{% assign client-scores-u = client-scores-u | push: client-sorted-array[3] %}
	{% assign client-scores-families = client-scores-families | push: client-sorted-array[4] %}
{% endfor %}
{% comment %}
	7. We display the data.
{% endcomment %}
<ul class="scoreboard">
	{% assign client-scores-limit = include.limit | default: 999 %}
	{% assign number-of-features = site.features.size | times: 1 %}
	{% assign half-number-of-features = number-of-features | divided_by: 2 %}
	{% for client in client-scores-families limit:client-scores-limit %}
		{% assign i = forloop.index | minus:1 %}
		{% assign client-family = client | split:':' | first %}
		{% assign client-platform = client | split:':' | last %}

		{% assign client-scores-y-number = client-scores-y[i] | times: 1 %}
		{% assign client-scores-a-number = client-scores-a[i] | times: 1 %}
		{% assign client-scores-n-number = client-scores-n[i] | times: 1 %}
		{% assign client-number-of-features = client-scores-y-number | plus: client-scores-a-number | plus: client-scores-n-number %}
		{% assign client-scores-u-number = number-of-features | minus: client-number-of-features %}

		{% assign client-scores-y-percent = client-scores-y[i] | times: 100 | divided_by: number-of-features | round: 2 %}
		{% assign client-scores-a-percent = client-scores-a[i] | times: 100 | divided_by: number-of-features | round: 2 %}
		{% assign client-scores-n-percent = client-scores-n[i] | times: 100 | divided_by: number-of-features | round: 2 %}
		{% assign client-scores-u-percent = 100 | minus: client-scores-y-percent | minus: client-scores-a-percent | minus: client-scores-n-percent | round: 2 %}

		{% assign client-css-class = '' %}
		{% if client-number-of-features <= half-number-of-features %}
			{% assign client-css-class = 'class="not-enough-tests"' %}
		{% endif %}
	<li {{ client-css-class }}>
		<div class="score">
			{% if client-scores-y-number != 0 %}
			<div role="group" title="{{ client-scores-y-number | append: ' features ' | append: site.data.nicenames.support['supported'] | downcase }}" style="width:{{client-scores-y-percent | default:0 }}%;" class="supported"></div>
			{% endif %}
			{% if client-scores-a-number != 0 %}
			<div role="group" title="{{ client-scores-a-number | append: ' features ' | append: site.data.nicenames.support['mitigated'] | downcase }}" style="width:{{client-scores-a-percent | default:0 }}%;" class="mitigated"></div>
			{% endif %}
			{% if client-scores-n-number != 0 %}
			<div role="group" title="{{ client-scores-n-number | append: ' features ' | append: site.data.nicenames.support['unsupported'] | downcase }}" style="width:{{client-scores-n-percent | default:0 }}%;" class="unsupported"></div>
			{% endif %}
			{% if client-scores-u-number != 0 %}
			<div role="group" title="{{ client-scores-u-number | append: ' features with ' | append: site.data.nicenames.support['unknown'] | downcase }}" style="width:{{client-scores-u-percent | default:0 }}%;" class="unknown"></div>
			{% endif %}
		</div>
		<span class="score-text">
			<span class="score-name">
				{% assign family-page = site.clients | where:"slug", client-family | first %}
				{% if family-page != nil and family-page != "" %}
				<a href="/clients/{{client-family}}/#{{ client-platform | slugify }}">
				{% endif %}
				{{ site.data.nicenames.family[client-family] | default: client-family }}
				({{ site.data.nicenames.platform[client-platform] | default: client-platform }})
				{% if family-page != nil and family-page != "" %}
				</a>
				{% endif %}
			</span>:
			{{ client-scores-y-number }}<small>/{{ client-number-of-features }}</small>
		</span>
	</li>
	{% endfor %}
</ul>