CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-rc-progress

Progress UI component for React providing customizable line and circle progress bars

Overall
score

100%

Overview
Eval results
Files

rubric.jsonevals/scenario-3/

{
  "context": "This criteria evaluates how well the engineer uses the @rc-component/progress package to implement partial circular gauges with configurable gap degrees and positions. The focus is on proper usage of the Circle component's gapDegree and gapPosition props to create dashboard-style gauge visualizations.",
  "type": "weighted_checklist",
  "checklist": [
    {
      "name": "Circle Component Import",
      "description": "Correctly imports and uses the Circle component from @rc-component/progress package",
      "max_score": 15
    },
    {
      "name": "gapDegree Prop Usage",
      "description": "Properly uses the gapDegree prop to configure partial circles (180° for semicircle, 90° for three-quarter circle)",
      "max_score": 25
    },
    {
      "name": "gapPosition Prop Usage",
      "description": "Correctly uses the gapPosition prop to control where the gap appears ('top', 'bottom', 'left')",
      "max_score": 25
    },
    {
      "name": "Percent Prop",
      "description": "Properly passes the value prop to the Circle component's percent prop to display progress",
      "max_score": 15
    },
    {
      "name": "strokeWidth Prop",
      "description": "Correctly uses the strokeWidth prop to control the visual thickness of the gauge",
      "max_score": 10
    },
    {
      "name": "Test Requirements Met",
      "description": "Implementation passes all test cases with correct gap degree and position combinations (180°/top, 90°/bottom, 90°/left)",
      "max_score": 10
    }
  ]
}

Install with Tessl CLI

npx tessl i tessl/npm-rc-progress

tile.json