Bu makalede, React uygulamalarında Material-UI Chart bileşenleri kullanılarak grafikler oluşturmanın nasıl yapılacağı açıklanıyor Material-UI Chart bileşenleri, Line Chart, Bar Chart ve Pie Chart olmak üzere üç ana bileşenden oluşuyor ve özelleştirilebilir grafikler oluşturmak için kullanılabiliyor Kurulumu için Material-UI paketi ve kullanılacak bileşenin paketinin npm ile yüklenmesi gerekiyor Bu bileşenler, özelliklerinin doğru şekilde kullanılması ile profesyonel uygulamaların da kullanabileceği özellikleri sunuyor Özellikle okuyucuların görselleştirilmiş verileri daha iyi anlamalarını sağlıyorlar,Line Chart kullanımında, bir Line bileşeni oluşturularak data adlı prop ile chart için veriler sağlanıyor Veri formatı bir array şeklinde olmalı ve her bir item bir object olarak belirtilmelidir options adlı prop ile verilerin chart üzerinde nasıl gösterileceği belirleniyor Zaman çizelgesi göstermek için

React, bugün en çok kullanılan JavaScript kütüphanelerinden biridir. Material-UI ise React uygulamalarında kullanılan bir UI kütüphanesidir. Material-UI Chart bileşenleri, Material-UI tarafından sağlanan grafik bileşenleridir ve bu bileşenler, oldukça kullanışlı ve özelleştirilebilir grafikler oluşturmak için kullanılabilir.

Bu makalede, React uygulamalarında Material-UI Chart bileşenlerinin nasıl kullanılabileceği ele alınacak. Bunlar, Line Chart, Bar Chart ve Pie Chart şeklinde üç ana bileşenden oluşur. Bu makalede, her bir bileşenin nasıl kurulacağı, nasıl kullanılacağı, veri formatları ve özellikleri hakkında ayrıntılı açıklamalar bulacaksınız.

Material-UI Chart bileşenleri, özelleştirilebilir grafikler oluşturmak için en iyi seçimdir. Bu bileşenler, profesyonel uygulamaların kullanabileceği özellikler sunar ve ayrıntılı kullanım kılavuzları ile birleştirildiğinde, React geliştiricileri için çok değerli bir araç haline gelir. Yazılımcılar, grafiklerin kontrolünü ele alırken, okuyucular da görselleştirilmiş verilerin keyfini çıkarabilirler.

Material-UI Chart Bileşenlerinin Kurulumu

React uygulamalarında Material-UI chart bileşenlerini kullanmak için öncelikle Material-UI paketini projemize eklememiz gerekiyor. Bunun için npm paket yöneticisi kullanarak terminale npm install @material-ui/core komutunu yazabiliriz.

Ardından, kullanacağımız chart bileşenlerinin paketlerini yine aynı şekilde npm ile yükleyebiliriz. Örneğin, line chart bileşeni için npm install @material-ui/core @material-ui/lab komutunu kullanabiliriz.

Bileşenlerin kurulumu tamamlandıktan sonra, kullanmak istediğimiz bileşenin import edilmesi gerekiyor. Örneğin, line chart bileşeni için import { LineChart } from '@material-ui/lab'; şeklinde bir import işlemi yapabiliriz.

Bu adımlar tamamlandıktan sonra, artık Material-UI chart bileşenlerini kullanmaya hazırız. Kullanacağımız bileşenin özellikleri ve hangi veri formatını kabul ettiği hakkında bilgi edinerek, kodlarımızı yazabiliriz.

Line Chart Kullanımı

React uygulamalarında Line chart bileşenleri Material-UI tarafından sağlanmaktadır. Line chart bileşenini kullanmak için öncelikle "npm install @material-ui/core" ve "npm install @material-ui/charts" komutları kullanılarak Material-UI kütüphaneleri yüklenmelidir.

Line chart bileşenini kullanmak için "Line" adlı bir bileşen oluşturulmalıdır. Bileşen içerisinde "data" adlı bir prop kullanılarak chart için veriler sağlanmalıdır. Veri formatı bir array olmalıdır ve her bir item bir object olarak belirtilmelidir. Örnek bir veri formatı aşağıdaki gibidir:

Verilerin chart üzerinde nasıl görüneceği "options" adlı prop ile belirlenir. Options içerisinde "xAxis" ve "yAxis" gibi ayarlar yapılabilir. Örnek bir options formatı aşağıdaki gibidir:

• xAxis: { dataKey: 'Tarih' }
• yAxis: { dataKey: 'Satış Miktarı' }

Line chart bileşeninde zaman çizelgesi göstermek için "parseTime" adlı bir prop kullanılır. Bu prop "true" olarak belirlendiğinde chart üzerinde tarih bilgisi gösterilir.

Line chart bileşeninde birden fazla çizgi göstermek için "LineChart", "XAxis", "YAxis" ve "Tooltip" bileşenlerini kullanmak gerekir. Bu bileşenlerle birlikte "Line" bileşeni birden fazla kez tekrarlanabilir.

Örnek bir Line chart bileşeni kodu aşağıdaki gibidir:

{`            `}

Line Chart Label Düzenlemesi

Line chart bileşeninde, label düzenlemeleri yaparak grafiklerin daha anlaşılır olmasını sağlayabilirsiniz. Label düzenlemeleri ile x ve y ekseni için label font stilini, boyutunu ve pozisyonunu belirleyebilirsiniz.

Line chart bileşeninde label font stilini belirlemek için labelStyle propertysini kullanabilirsiniz. Bu property ile font ailesi, font büyüklüğü ve rengini ayarlayabilirsiniz.

{`                    `}

Bu örnekte, line chart bileşenine label propertysini ekleyerek label oluşturuldu. value propertysi ile label adı belirlenirken, position propertysi ile label pozisyonu belirlendi. dy propertysi ile labelin yüksekliği ayarlandı.

Ayrıca, label pozisyonunu angle propertysi ile değiştirebilirsiniz. Örneğin, y ekseni labeli dikey yerine yatay olarak girmek isterseniz angle propertysi kullanılabilir.

Label Font Stili

Label font stilini değiştirmek, chart bileşenlerindeki yazıların görünümünü değiştirmenin en basit yoludur. Material-UI Chart bileşenlerinde font stilini değiştirmek için, label ve ticks özelliklerini kullanabilirsiniz.

Öncelikle, label ve ticks özelliklerini ayrı ayrı belirtmeliyiz:

``` ```

Yukarıdaki örnekte, label ve ticks özellikleri ayarlanırken, value özelliği kullanılarak yazı belirtilir. Font stilini değiştirmek için, TextStyle özelliğini kullanabilirsiniz.

``` ```

Yukarıda TextStyle özelliği kullanılarak font stilinde değişiklik yapılıyor. Font boyutu (fontSize) ve kalınlık (fontWeight) gibi özellikleri burada belirleyebilirsiniz. CSS stil özellikleri gibi, farklı özellikleri ayarlamak için virgülle ayrılmış bir liste yapabilirsiniz.

Material-UI Chart bileşenlerinde font stiliyle ilgili yapabileceğiniz işlemler bu şekilde. Yararlı özelliklerini öğrenerek farklı chart bileşenlerinde kullanarak uygulamalarınıza canlılık kazandırabilirsiniz.

Label Pozisyonu

Line chart bileşeninde label pozisyonu, labelOffset prop ile değiştirilebilir. Bu prop, labelin line chartin üzerindeki konumunu belirler. Örnek kod için:

{`            `}

Yukarıdaki örnekte, insideBottomRight ve insideTopLeft değerleri labelOffset propuna atanmıştır. Bu sayede label pozisyonları değiştirilmiştir.

Farklı Line Chart Veri Formatları

Line chart bileşenleri, çeşitli veri biçimleriyle kullanılabilirler. Örnek olarak, veri noktalarını bir obje dizisi olarak da tanımlayabilirsiniz. Bu diziler, {x: 1, y: 2} formatında olabilir. Buna ek olarak, veri noktalarını da tek tek düzgün çizgiler olarak da tanımlayabilirsiniz. Ayrıca, verileri bir CSV dosyasından okuyup kullanabilirsiniz. Tüm bu veri biçimleri, line chart bileşenleri için geçerlidir.

Ayrıca, line chart bileşenleri farklı veri formları için de kullanılabilirler. Bu formlardan en popüler olanları zaman serileri ve etiketli veri serileridir. Zaman serileri, grafiklerinize saat, gün veya hafta bazında veri noktaları eklemenizi sağlar. Etiketli veri serileri ise, verilerinizi kategorilere ayırmak için kullanılabilir. Örneğin, bir kitaplık uygulaması için, roman, bilim kurgu gibi farklı kategorilere ayrılmış okuma sayılarını {label: 'Bilim Kurgu', value: 10} formatında kullanabilirsiniz.

Line chart bileşenleri, React uygulamalarınızda farklı veri biçimleri için kullanabileceğiniz çok yönlü bir grafik aracıdır. Farklı biçimlerdeki verileri uygun şekilde kullanarak, çeşitli veri noktalarınızı ve grafiklerinizi yaratabilirsiniz.

Bar Chart Kullanımı

React uygulamalarında Material-UI chart bileşenlerinden biri olan Bar Chart, verileri sütun grafikleri şeklinde görselleştirmeye yarayan bir bileşendir. Bar Chart bileşenini kullanmak için, öncelikle Material-UI kütüphanesini yüklemek gereklidir.

Bar Chart bileşeninin kullanımı oldukça kolaydır. Veriler, bir dizi obje olarak bileşenin veri prop'una geçirilir. Bu objeler, x ve y değerlerini içermelidir. X değeri, bir metin veya sayı olabilirken; y değeri ise sadece bir sayı olmalıdır. Örnek bir Bar Chart bileşen kodu şu şekildedir:

{`import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts';const data = [  {name: 'A', value: 10},  {name: 'B', value: 20},  {name: 'C', value: 15},  {name: 'D', value: 5},  {name: 'E', value: 30},];function BarChartExample() {  return (                                        );}export default BarChartExample;`}

Yukarıdaki kod parçasında BarChart bileşeninin içinde, veri prop'una data adında bir dizi obje geçirilmiştir. Bu dizi, x ve y değerlerini içermekte ve her bir obje, bir sütun olarak gösterilecektir. Ayrıca, figürünüze diğer detayları eklemek için XAxis, YAxis ve Tooltip bileşenleri de kullanılabilir.

Bar Chart bileşeni, renk özellikleri ve genişlik ayarlamaları gibi düzenlemeler için de özelleştirilebilir. Bunun için Bar bileşeninin özellikleri kullanılabilir. Aşağıdaki örnek kod, Bar Chart bileşeninde renk düzenlemesi yapmaktadır:

{``}

Bar Chart bileşeninde farklı veri formatları kullanılabilir. Örneğin, bir obje listesi yerine bir dizi olarak da veriler iletilerek çizdirme yapılabilir. Böylece grafik daha da kişiselleştirilebilir.

Bar Chart bileşeni, React uygulamalarında verilerin sütun grafikleri şeklinde gösterilmesi için oldukça kullanışlı bir bileşendir.

Bar Chart Renk Düzenlemeleri

Bar chart bileşenleri, grafiklerin daha anlaşılır hale gelmesini sağlar. Bu bileşenin kullanımı oldukça basittir ve renk düzenlemeleri de oldukça kolayca yapılabilir. Bar chart renk düzenlemeleri için genellikle color bileşeni kullanılır. Bu bileşen, verilerin her bir elemanı için farklı renk şemaları belirlemeyi sağlar.

Bunun yanı sıra, kullanıcılar bar chart bileşenlerinin renk düzenlemelerini çeşitli yollarla gerçekleştirebilir. Örneğin, palette seçeneği kullanılarak Chart bileşenlerinin varsayılan renk paletleri değiştirilebilir. Ayrıca, fillOpacity ya da strokeOpacity ile de şeffaflık ayarlamaları yapabilirsiniz. Bu şekilde, grafiklerin daha şık ve kullanışlı olması sağlanabilir.

Bunun yanı sıra, farklı veri formatlarına sahip bar chart bileşenlerinin renk düzenlemeleri de farklı olabilir. Örneğin, colorByPoint seçeneği farklı formatlardaki verilerin göstergeleri için farklı renk grupları belirlemenizi sağlar. Ayrıca, colorAxis seçeneği de veri grupları arasındaki farklılıkları renklerle belirleyebilir ve grafiklerin daha anlaşılır hale gelmesini sağlar.

Bar chart bileşenleri, renkli tasarımları sayesinde verileri daha gösterişli ve anlaşılır bir şekilde sunmanıza yardımcı olur. Renk ayarlarını doğru bir şekilde yaparak, grafiklerin daha etkili bir şekilde kullanımını sağlayabilirsiniz.

Veri Formatı Değiştirme

Bar chart bileşeni birçok farklı veri formatına uyumlu olacak şekilde tasarlanmıştır. Verilerinizin formatına göre farklı seçenekler arasından seçim yapabilirsiniz.

Örneğin, bir dizi nesne içeren bir veri setinizi bar chart bileşeninde kullanmak istiyorsanız, her bir nesnenin özelliklerini gösteren bir çift veri (x ve y koordinatları gibi) sağlamanız gerekecektir. Böylece her özellik sırasıyla çizelge ekseni ve çubuk yüksekliği ile eşleştirilir.

Yine, bir nesne için birden fazla özellik de sağlayabilirsiniz. Bu durumda, bir liste içinde her bir özelliği bir anahtar-değer çifti olarak sağlayabilirsiniz. Kodlama açısından, beklendiği gibi, dizi veya nesne olarak sağlanan verileri özelleştirmek için kullanabileceğiniz birden fazla seçenek vardır.

Özetle, her bir bar chart bileşeni için farklı veri formatlarını kullanabilmeniz mümkündür. Bu sayede, size en uygun olan veri setinin kullanılmasıyla, en iyi veri görselleştirme sonuçlarına ulaşabilirsiniz.

Pie Chart Kullanımı

Pie chart bileşeni, bir veri kümesinin farklı parçalarının oranlarını göstermek için kullanılan bir grafik türüdür. Material-UI kütüphanesi, pie chart bileşenini kullanmak için Pie component'ini içermektedir. Pie bileşeni, veri kümesindeki her bir parçanın oranını hesaplayarak, parçaları ilgili yüzdelik dilimlerle birlikte görselleştirir.

Pie bileşenini kullanmak için, öncelikle Material-UI kütüphanesini React projesine eklemek gereklidir. Daha sonra, Pie bileşenini kullanmak için Pie component'ini uygulamaya dahil etmek yeterlidir. Pie bileşeni, iki adet önemli prop değeri alır: data ve options. Data prop'una, göstermek istediğimiz verileri içeren bir dizi nesne verilmelidir. Her bir nesne, bir parça adı ve oranını içermektedir. Options prop'una, pie chart bileşeninin görsel özellikleri ayarlanabilir.

Örnek olarak, aşağıdaki kod bloğu Pie bileşenini kullanarak, bir veri kümesinin oranlarını göstermektedir.

```import React from "react";import { Pie } from "@material-ui/core/Chart";

const data = [ { name: "A", value: 400 }, { name: "B", value: 300 }, { name: "C", value: 200 }, { name: "D", value: 100 },];

const options = { title: { display: true, text: "Veri Kümesi Oranları", },};

export default function PieChart() { return ( <> );}```Yukarıdaki örnekte, Pie bileşeni, veri kümesi `data` ile oluşturuldu. Options prop'u, pie chart bileşeninin görüntüsünü özelleştirmek için kullanıldı. Ayrıca, bileşenin başlığı "Veri Kümesi Oranları" olarak ayarlandı.

Pie bileşeni, slice adı verilen kısımların hover edildiğinde değiştirilebilmesine olanak sağlar. Slice modifikasyonları için, onHover() ve onCancel() callback fonksiyonları kullanılabilir. Bu fonksiyonlar, pie chart bileşeninin interaktifliği için oldukça faydalıdır.

Tüm bunların yanı sıra farklı veri formatları için değişiklikler yapılarak, pie chart bileşeni kullanımı çeşitlendirilebilir. Pie bileşeni, verileri bellekten çekerek veya direkt olarak veri kümesi olarak girdi alarak kullanılabilir. Her senaryoda, pie chart bileşeni, verilerin daha anlaşılır ve görsel bir şekilde sunulmasına yardımcı olur.

Pie Chart Slice Modifier

Pie chart bileşeninde slice modifikasyonları, grafikteki her bir dilim için özel stiller ve renkler kullanarak verilerin daha açık bir şekilde gösterilmesine olanak tanıyabilir. Material-UI, pie chart slice modifikasyonları için `PieChart` ve `Pie` bileşenlerini sağlar.

`PieChart` bileşeni genellikle bir `div` içine yerleştirilir ve genişlik, yükseklik, veri, renk ve stiller gibi özelliklerle yapılandırılabilir. Ayrıca, `Pie` bileşenlerine veri sağlamak için kullanılır.

`Pie` bileşeni `PieChart` bileşeni içinde yer alır ve veri, renk, stiller ve diğer özelliklerle yapılandırılabilir. Veriler tipik olarak bir dizi obje olarak sağlanır. Objeler, dilimlere karşılık gelen anahtar-değer çiftleri içerir: örneğin, { name: 'Elma', value: 2 }.

Aşağıdaki kod, pie chart bileşeninde slice modifikasyonlarını yapmak için örnek bir şekilde gösterilmektedir:

Bu örnek, dört adet dilimi olan bir pie chart bileşeni oluşturur. `renderActiveShape` fonksiyonu, grafikteki her bir dilim için özel bir stiller oluşturur. Dilimlere tıkladığınızda, seçili olan dilim, `activeShape` parametresi aracılığıyla özel olarak belirtilmiş şekilde gösterilir.

Farklı Veri Formatları

Pie chart bileşeni, farklı veri formatlarına sahip olabilir ve her format için farklı bir görünüm özelliği sunabilir. Bu farklılıkları anlamak, verilerinizi grafikte nasıl temsil edeceğiniz konusunda size fikirler verebilir.

Birinci veri formatı, verilerin yüzdelerle ifade edildiği bir formattır. Bu format, verileri dairesel olarak göstermek için mükemmeldir. Örneğin, bir malzeme ihtiyacı listesi için kullanılabilir. Her malzemenin yüzdesi, toplam malzeme bütçesiyle birlikte gösterilebilir.

İkinci veri formatı, verilerin tam sayılarla ifade edildiği bir formattır. Bu format, farklı öğelerin popülerliğini göstermek için mükemmeldir. Örneğin, bir restoran menüsünde bir yemek kategorisindeki farklı yemeklerin sipariş sayıları hesaplanabilir.

Üçüncü veri formatı, bir veri kümesindeki farklı öğelerin sayılarının bir listesiyle ifade edilir. Bu format, bir araştırma sonucu raporlamak için mükemmeldir. Örneğin, bir müşteri anketini değerlendirirken kullanılabilir.

• Uygulamayı kullanmak için kolay seçenekleri araştırdım: 50 kişi
• Uygulamanın sezgisel olduğunu düşünüyorum: 45 kişi
• Uygulamanın performansı hakkında bir sorun yaşamadım: 35 kişi
• Uygulamanın özelliklerinin tamamını kullandığıma eminim: 20 kişi
• Uygulamayı bir arkadaşıma öneririm: 25 kişi

Bu farklı veri formatları, pie chart bileşenlerinde rahatlıkla kullanılabilir. Her bir formatın özelliklerini dikkate alarak, verilerinizi en iyi şekilde temsil eden bir grafik oluşturabilirsiniz.