Star Rating

The star rating defines a shape which represents a progress bar as a star rating (in the vein of reviews). The progress bar is continuous and clips to the geometry of the stars. A discrete version could be implemented which rounds the input to the nearest 0.5 to make it map to whole or half stars.

{
  properties: [
    { name: 'Min', label: 'Min', type: 'number', default: 0 }
    { name: 'Max', label: 'Max', type: 'number', default: 100 }
    { name: 'Value', label: 'Value', type: 'number', default: 20
      constraints: [
        { condition: '=@Value >= @Min', resolution: '=@Min', message: 'Too low!' }
        { condition: '=@Value <= @Max', resolution: '=@Max', message: 'Too high!' }
      ]
    }
    { name: 'Foreground', label: 'Foreground', type: 'color', default: '=fillColor()' }
    { name: 'Background', label: 'Background', type: 'color', default: '#D7E9FF' }
  ],
  templates: [
    { name: 'stars'
      geometry: [
        {
            type: union
            geometry: [
              { type: 'polygon', n: 5, inset: 0.4, x: 0.0, y: 0, w: 0.2, h: 1 }
              { type: 'polygon', n: 5, inset: 0.4, x: 0.2, y: 0, w: 0.2, h: 1 }
              { type: 'polygon', n: 5, inset: 0.4, x: 0.4, y: 0, w: 0.2, h: 1 }
              { type: 'polygon', n: 5, inset: 0.4, x: 0.6, y: 0, w: 0.2, h: 1 }
              { type: 'polygon', n: 5, inset: 0.4, x: 0.8, y: 0, w: 0.2, h: 1 }
            ]
        },
      ]
    }
  ],
  style: { fill: { type: 'color', color: '=@Background' } },
  // Draw the background
  geometry: [
    { type: 'template', template: 'stars' }
  ]
  shapes: [
    // Draw the foreground
    {
      style: { fill: { type: 'color', color: '=@Foreground' } },
      geometry: [
        {
          type: intersection
          geometry: [
            { type: 'template', template: 'stars' }
            { type: 'rect', w: '=(@Value - @Min) / (@Max - @Min)' }
          ]
        }
      ],
    },
    // Outline the stars (using the foreground color darkened by 20%).
    {
      style: {
        fill: { type: 'color', color: '#00000000' },
        stroke: { color: '=DARKEN(@Foreground, 20%)', width: 1 },
      },
      geometry: [
        { type: 'template', template: 'stars' }
      ]
    }
  ]
}