[CD-152] Feat: 프롬프트 정확도 추이 그래프 구현

[Shin-MG]

Feature Descriptions

x축 : practiceDate(연습한 시간) / y축 : precision(정확도) 찍는 순간 커서를 움직여서 위치가 달라보이는데, 원에 커서 가져다대면 시간+정확도 박스가 뜹니다! 디자인에 대한 피드백 받습니다...... 어떻게 해야할지 모르겠어여....ㅎ

Tasks to Complete

• [x] 프롬프트 정확도 추이 그래프 구현

Additional Resources (Optional)

[why-arong]

지금 정확도는 더미 데이터에여?

그래프가 왼쪽으로 왜 휘는거죠? 같은 시간 t에 정확도가 2개라는 말인가요?

[anjiwon319]

디자인 완전 예쁜데요? 갓민경🫶 X축도 시간 정보가 주어지면 좋을 것 같아요 박스에 커서 두면 보이긴 하지만 y축 처럼 간단하게라도 있으면 좋을 것 같슴다!

[why-arong]

맞아여 디자인 너무 이뻐요! 그라데이션 굿

[Shin-MG]

@why-arong 넴 더미데이터입니다. 데이터 간 똑같은 간격을 가지는 게 아니라 시간에 따라 표시되는데, 3-4번째 점은 같은날 35분정도 차이로 기록된거라 비슷한 위치에 있어요. 여기에 쓰인 구체적인 데이터는 아래 참고해주세요~ { 'practiceDate': 2024-04-28 22:03:04, 'precision': 89 }, { 'practiceDate': 2024-05-01 23:17:32, 'precision': 42 }, { 'practiceDate': 2024-05-03 23:23:37, 'precision': 95 }, { 'practiceDate': 2024-05-03 23:59:59, 'precision': 54 }, { 'practiceDate': 2024-05-05 02:10:22 , 'precision': 89 }

[anjiwon319]

@why-arong 넴 더미데이터입니다. 데이터 간 똑같은 간격을 가지는 게 아니라 시간에 따라 표시되는데, 3-4번째 점은 같은날 35분정도 차이로 기록된거라 비슷한 위치에 있어요. 여기에 쓰인 구체적인 데이터는 아래 참고해주세요~

{ 'practiceDate': 2024-04-28 22:03:04, 'precision': 89 },

{ 'practiceDate': 2024-05-01 23:17:32, 'precision': 42 },

{ 'practiceDate': 2024-05-03 23:23:37, 'precision': 95 },

{ 'practiceDate': 2024-05-03 23:59:59, 'precision': 54 },

{ 'practiceDate': 2024-05-05 02:10:22 , 'precision': 89 }

그럼 그래프 보여줄 때 각 점들 간의 거리를 모두 같은 거리로 일정하게 두고 연습한 데이터가 쌓이면 그 거리를 좁히는 식으로 보여주는 건 어때유?

[Shin-MG]

@anjiwon319 x축에 시간 정보를 넣어봤어요. 그런데 간격이 짧게 기록되면 x축이 너무 지저분해질거같고, 하루 단위로 표기하기에는 기록 텀이 너무 길어지거나 데이터가 없는데 표시되어 혼동을 주는거 같아 삭제했어요. x축에 시간을 넣으면 기록 시작일하고 마지막일 정도만 표기하는게 어떨까 싶습니다. 의견 주세요~

[anjiwon319]

@Shin-MG 그러게유 지저분해 보일 수도 있어서 민경님이 말하신대로 하면 좋을 것 같아여 구웃!

[Shin-MG]

그럼 그래프 보여줄 때 각 점들 간의 거리를 모두 같은 거리로 일정하게 두고 연습한 데이터가 쌓이면 그 거리를 좁히는 식으로 보여주는 건 어때유?

아이디어 너무 좋은데, 구현하는데 시간이 오래 걸릴거같아요...ㅎㅎ 여유있을 때 반영해보겠습니다!

[anjiwon319]

@Shin-MG ㅋㅋㅋㅋㅋㅋㅌㅋㅋㅋ마자 조하여 그럼 일단 지금 그래프는 모든 연습 데이터 정확도를 다 그래프에 보여주는 거죠??

[Shin-MG]

넵 맞아요. firestore의 promptResult에 저장된 기록 전부 그래프에 표시하고 있습니당