docs(Arc): Simplify segment arc examples

techniq · Jan 6, 2025 · 93793d9 · 93793d9
1 parent 53755f5
commit 93793d9
Showing 1 changed file with 7 additions and 17 deletions.
diff --git a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
@@ -135,11 +135,9 @@
         <SpringValue {value} let:value>
           {#each { length: segments } as _, segmentIndex}
             {@const segmentAngle = (2 * Math.PI) / segments}
-            {@const startAngle = segmentIndex * segmentAngle}
-            {@const endAngle = (segmentIndex + 1) * segmentAngle}
             <Arc
-              {startAngle}
-              {endAngle}
+              startAngle={segmentIndex * segmentAngle}
+              endAngle={(segmentIndex + 1) * segmentAngle}
               innerRadius={-20}
               cornerRadius={4}
               padAngle={0.02}
@@ -148,7 +146,7 @@
                   ? 'fill-success-300'
                   : 'fill-surface-content/10'
               )}
-            ></Arc>
+            />
           {/each}
 
           <Text
@@ -179,31 +177,23 @@
             <SpringValue {value} let:value>
               {#each { length: segments } as _, segmentIndex}
                 {@const segmentAngle = (2 * Math.PI) / segments}
-                {@const startAngle = segmentIndex * segmentAngle}
-                {@const endAngle = (segmentIndex + 1) * segmentAngle}
                 <Arc
-                  {startAngle}
-                  {endAngle}
+                  startAngle={segmentIndex * segmentAngle}
+                  endAngle={(segmentIndex + 1) * segmentAngle}
                   innerRadius={-20}
                   cornerRadius={4}
                   padAngle={0.02}
-                  class={cls(
-                    (segmentIndex / segments) * 100 < (value ?? 0)
-                      ? 'fill-success-300'
-                      : 'fill-surface-content/10'
-                  )}
-                ></Arc>
+                />
               {/each}
             </SpringValue>
           </svelte:fragment>
           <Arc
             {value}
             innerRadius={-20}
             spring
-            let:value
             class="fill-success-300"
             track={{ class: 'fill-surface-content/10' }}
-          ></Arc>
+          />
         </ClipPath>
 
         <Text