OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

how to position elements in the many layers of this tier circle, distributed evenly and equidistant from the center?

  • Thread starter Thread starter Fábio Seyiji
  • Start date Start date
F

Fábio Seyiji

Guest
Image of the css concentric circles i have I need to display items dinamically given a list of jsons, but what i need to know is how to get all the items in the correct position. I thought of doing something like tier A (inner circle) = 20px from center, tier B (second circle from center) = 120px from center and so on and position the items with the pair (distanceFromCenter, angle) with angle starting at top being 0. Is there a way to do this? or do it in a easyer way?

Code:
import React from 'react'
import styles from './test.module.css'

export default function RadarComponent() {
  return (
    <div className={styles.container}>
        <h1>Radar Cadmus</h1>
        <div className={styles.circleOne}>
            <div className={styles.circleTwo}>
                <div className={styles.circleThree}>
                    <div className={styles.circleFour}>

                    </div>
                </div>
            </div>
        </div>
    </div>
  );
}

Code:
.container{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 1px solid #000;
}

.circleOne{
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
    background-color: green;
    width: 700px;
    height: 700px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.circleTwo{
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
    background-color: rgb(128, 255, 0);
    width: 550px;
    height: 550px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.circleThree{
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
    background-color: rgb(242, 255, 0);
    width: 400px;
    height: 400px;
    align-items: center;
    display: flex;
    justify-content: center;
}

.circleFour{
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
    background-color: rgb(255, 153, 0);
    width: 250px;
    height: 250px;
    align-items: center;
    display: flex;
    justify-content: center;
}

I tried using chartJs radar but the problem is i can't make the sections different colors and one added item in the dataset changes the whole position of all items, because the radar chart has relative positions.

Code:
'use client';

import React from 'react';
import { Radar } from 'react-chartjs-2';
import {
  Chart as ChartJS,
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
} from 'chart.js';

ChartJS.register(
  RadialLinearScale,
  PointElement,
  LineElement,
  Filler,
  Tooltip,
  Legend,
);


const data = {
  labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
  datasets: [{
    label: 'My First Dataset',
    data: [65, 59, 90, 81, 56, 55, 40],
    fill: false, // Não preencher o fundo
    borderColor: 'transparent', // Tornar a linha invisível
    pointBackgroundColor: '#415364', // Cor das bolinhas
    pointBorderColor: '#415364',
    pointHoverBackgroundColor: '#415364',
    pointHoverBorderColor: '#fff',
    pointRadius: 5, // Tamanho das bolinhas
  }]
};

const options = {
  elements: {
    line: {
      borderWidth: 3,
    },
  },
  scales: {
    r: {
      backgroundColor: 'rgba(0, 255, 0 , 1)',
      angleLines: {
        display: false, //if true shows angleLines that cross with the ticks
      },
      grid: {
        circular: true, //this allows the ticks to be circular and not polygonal
        color: 'rgba(0, 0, 0, 1)',
      },
      ticks: { //a tick is one of the circunferences of the chart
        color: 'black',
        count: 5, //number of ticks
        display: false, //if true show tick labels
      },
      pointLabels: {
        font: {
          size: 12,
          weight: 'bold',
        },
        color: 'black',
      },
    },
  },
  plugins: {
    legend: {
      display: false
    },
    tooltip: {
      enabled: true,
    },
  },
};

// Função para obter o texto do marcador
const getMarkerText = (value: number) => {
  if (value >= 75) return 'Alto';
  if (value >= 50) return 'Médio';
  return 'Baixo';
};

export default function RadarComponent() {
    
  return (
    <div style={{ width: '600px', height: '600px' }}>
      <Radar options={options} data={data}/>
    </div>
  );
}

enter image description here

<p><a href="https://i.sstatic.net/WKcRfOwX.png" rel="nofollow noreferrer">Image of the css concentric circles i have</a>
I need to display items dinamically given a list of jsons, but what i need to know is how to get all the items in the correct position. I thought of doing something like
tier A (inner circle) = 20px from center, tier B (second circle from center) = 120px from center and so on
and position the items with the pair (distanceFromCenter, angle) with angle starting at top being 0.
Is there a way to do this? or do it in a easyer way?</p>
<pre><code>import React from 'react'
import styles from './test.module.css'

export default function RadarComponent() {
return (
<div className={styles.container}>
<h1>Radar Cadmus</h1>
<div className={styles.circleOne}>
<div className={styles.circleTwo}>
<div className={styles.circleThree}>
<div className={styles.circleFour}>

</div>
</div>
</div>
</div>
</div>
);
}
</code></pre>
<pre><code>.container{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #000;
}

.circleOne{
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
background-color: green;
width: 700px;
height: 700px;
align-items: center;
display: flex;
justify-content: center;
}

.circleTwo{
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
background-color: rgb(128, 255, 0);
width: 550px;
height: 550px;
align-items: center;
display: flex;
justify-content: center;
}

.circleThree{
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
background-color: rgb(242, 255, 0);
width: 400px;
height: 400px;
align-items: center;
display: flex;
justify-content: center;
}

.circleFour{
border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
background-color: rgb(255, 153, 0);
width: 250px;
height: 250px;
align-items: center;
display: flex;
justify-content: center;
}
</code></pre>
<p>I tried using chartJs radar but the problem is i can't make the sections different colors and one added item in the dataset changes the whole position of all items, because the radar chart has relative positions.</p>
<pre><code>'use client';

import React from 'react';
import { Radar } from 'react-chartjs-2';
import {
Chart as ChartJS,
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
} from 'chart.js';

ChartJS.register(
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
);


const data = {
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
datasets: [{
label: 'My First Dataset',
data: [65, 59, 90, 81, 56, 55, 40],
fill: false, // Não preencher o fundo
borderColor: 'transparent', // Tornar a linha invisível
pointBackgroundColor: '#415364', // Cor das bolinhas
pointBorderColor: '#415364',
pointHoverBackgroundColor: '#415364',
pointHoverBorderColor: '#fff',
pointRadius: 5, // Tamanho das bolinhas
}]
};

const options = {
elements: {
line: {
borderWidth: 3,
},
},
scales: {
r: {
backgroundColor: 'rgba(0, 255, 0 , 1)',
angleLines: {
display: false, //if true shows angleLines that cross with the ticks
},
grid: {
circular: true, //this allows the ticks to be circular and not polygonal
color: 'rgba(0, 0, 0, 1)',
},
ticks: { //a tick is one of the circunferences of the chart
color: 'black',
count: 5, //number of ticks
display: false, //if true show tick labels
},
pointLabels: {
font: {
size: 12,
weight: 'bold',
},
color: 'black',
},
},
},
plugins: {
legend: {
display: false
},
tooltip: {
enabled: true,
},
},
};

// Função para obter o texto do marcador
const getMarkerText = (value: number) => {
if (value >= 75) return 'Alto';
if (value >= 50) return 'Médio';
return 'Baixo';
};

export default function RadarComponent() {

return (
<div style={{ width: '600px', height: '600px' }}>
<Radar options={options} data={data}/>
</div>
);
}

</code></pre>
<p><a href="https://i.sstatic.net/4JXNyKLj.png" rel="nofollow noreferrer">enter image description here</a></p>
 

Latest posts

M
Replies
0
Views
1
Mohit Pant
M
Top